Keyboard 键盘

该组件为TuniaoUI自定义的键盘面板，内置了数字键盘，车牌号码，身份证3种模式，都有可以打乱按键顺序的选项。 可以结合TuniaoUI的验证码输入组件使用

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	兼容中	兼容中	兼容中	兼容中

基本使用

通过mode参数定义键盘的类型，v-model绑定一个值为布尔值的变量控制键盘的弹出与收起：

• mode = number (默认值)为数字键盘，此时顶部工具条中间的提示文字为"数字键盘"
• mode = car 为汽车键盘，此时顶部工具条中间的提示文字为"车牌号键盘"
• mode = card 为身份证键盘，此时顶部工具条中间的提示文字为"身份证键盘"

<template>
  <view>
    <tn-keyboard mode="number" v-model="show"></tn-keyboard>
    <tn-button @click="show = true">打开</tn-button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        show: false
      }
    }
  }
</script>

设置顶部工具条信息

• 通过tooltip参数配置是否显示显示顶部的工具条，默认为true
• 通过tips参数修改工具条中间的提示文字
• 通过showTips可以控制是否显示工具条中间的文字
• 通过cancelBtn参数配置是否显示工具条左边的"取消"按钮
• 通过confirmBtn参数配置是否显示工具条右边的"完成"按钮

<tn-keyboard mode="number" v-model="show" tips="请输入金额" :cancelBtn="false"></tn-keyboard>

是否显示遮罩

在某些场景下需要用户可以观察到输入的内容，这时候可以设置mask属性为false隐藏遮罩。

<tn-keyboard mode="number" v-model="show" :mask="false"></tn-keyboard>

打乱键盘的顺序

可以通过设置randomEnabled参数设置是否打乱键盘的按键的顺序。

<tn-keyboard mode="number" v-model="show" :randomEnabled="true"></tn-keyboard>

获取键盘点击键的信息

• 输入值是通过组件的change事件实现的，组件内部每个按键被点击的时候，组件就会发出一个change事件，回调参数为点击的按键的值。
• 通过backspace事件监听键盘退格键的点击，通过修改父组件的值实现退格的效果，见下方示例

<template>
  <tn-keyboard v-model="show" mode="number" @change="valChange" @backspace="backspace"></tn-keyboard>
</template>

<script>
  export default {
    data() {
      return {
        value: '',
        show: false
      }
    },
    methods: {
      // 按键被点击(点击退格键不会触发此事件)
      valChange(val) {
        // 将每次按键的值拼接到value变量中
        this.value += val
        console.log(this.value);
      },
      // 退格键被点击
      backspace() {
        // 删除value的最后一个字符
        if (this.value.length) this.value = this.value.substr(0, this.value.length - 1)
        console.log(this.value);
      }
    }
  }
</script>

API

Props

属性名	说明	类型	默认值	可选值
v-model	用户控件键盘的弹出与收起	Boolean	false	true
mode	键盘类型	String	number	card/car
dotEnabled	显示小数点，在数字模式下有效	Boolean	true	false
randomEnabled	打乱键盘顺序	Boolean	false	true
switchEnMode	切换中英文状态，在车牌模式下有效	Boolean	false	true
tooltip	显示顶部工具条	Boolean	true	false
showTips	顶部工具条中是否显示提示信息	Boolean	true	false
tips	顶部工具条中间提示文字	String	-	-
cancelBtn	显示取消按钮	Boolean	true	false
confirm	显示确认按钮	Boolean	true	false
cancelText	取消按钮的文字	String	取消	-
confirmText	确认按钮的文字	String	确认	-
safeAreaInsetBottom	开启底部安全区适配	Boolean	false	true
maskCloseable	点击遮罩层可关闭选择器	Boolean	true	false
mask	显示遮罩	Boolean	true	false
zIndex	弹窗的zIndex值	Number	20075	-

Slots

名称	说明
default	顶部工具条自定义中间提示内容

Event

事件名称	说明	回调参数
change	键盘按钮被点击时触发，不包含退格键	按键的值
cancel	点击取消按钮时触发	-
confirm	点击确认按钮时触发	-
backspace	点击键盘上的退格键时触发	-