Keyboard 键盘

内含了数字键盘，车牌号键，身份证号键盘3种模式，都有可以打乱按键顺序的选项。

可配合c-code-input组件使用，查看具体用法。

基本用法

keyboard.value.open({
  // 属性
  type:'car',
  // ...

  // 事件
  open:function (){},
  close:function (){},
  change:function ({val}){},
  backspace:function (){}
})

平台

App	小程序	H5
√	√	√

属性

属性名	类型	默认值	说明	平台
name	String	null	选择器名 用于事件中返回	All
type	String	number	键盘类型car/number/idCard	All
random	Boolean	false	是否打乱键盘按键的顺序	All
dotDisabled	Boolean	false	是否显示"."按键，type=number时有效	All
title	String,Object	null	标题 object请c-text组件的pros	All
cancelText	String,Object	关闭	按钮 object请c-text组件的pros	All
confirmText	String,Object	完成		All
radius	Number,String	null	圆角	All
closeOnMaskClick	Boolean	true	点击遮罩关闭	All
maskBgColor	String	rgba(0, 0, 0, 0)	弹出层背景	All
animation	Boolean	true	开启动画	All
titleProps	Object	{}	标题文本配置 参考c-text组件的props	All
customTabBar	Boolean	false	是否自定义tabBar	MP-WEIXIN
keyboardProps	Object	{}	键盘区域的样式配置	All
cClass	String,Array,Object	null	组件类	All
cStyle	String,Array,Object	null	组件样式	All
margin	String,Number,Array	null	外边距	All
padding	String,Number,Array	null	内边距	All
bgColor	String	null	背景色，支持c-bg-开头的背景色类	All

提示

微信小程序tabBar页面使用，当自定义tabBar时，需要设置customTabBar为true，否则会显示不正确。

事件

事件名	说明
close	{name}
open	{name}
confirm	{name}
cancel	{name}
titleClick	{name}
change	点击键盘时{name,val}
backspace	键盘删除回退建{name}

插槽

插槽名	说明
before	标题上方
default	标题下方，键盘上方
after	键盘下方

方法

名称	说明
open(null|props)	打开键盘 传递props时，将覆盖组件props
close()	关闭键盘
setCarAbc(isAbc)	车牌键盘设置为字母输入,type=car时有效

示例

以下是一个车牌号输入实现：

<template>
    <c-code-input v-model="carCode" ref="codeInput" disabledKeyboard inputType="text" count="8" gutter="14rpx" @click="codeInputOpen">
        <template #placeholder="slotProps">
            <c-box v-if="slotProps.index === 7" c-class="c-f-center">
                <c-icon name="plus" size="12" color="c-t-regular" bold />
                <c-text text="新能源" fontSize="8" color="c-t-regular" c-class="c-mt-2" />
            </c-box>
        </template>
    </c-code-input>
    
    <c-keyboard ref="keyboard" bgColor="#f8f8f8" />
</template>
<script setup>
import { ref } from 'vue'

const carCode = ref('');
const codeInput = ref(null);
const keyboard = ref(null);
function codeInputOpen(){
  codeInput.value.isFocus = true;

  keyboard.value.open({
    type:'car',
    open:function (){
      keyboard.value.setCarAbc(carCode.value.length > 0);
    },
    close:function (){
      codeInput.value.isFocus = false;
    },
    change:function ({val}){
      if(carCode.value.length < 1){
        // 是否省简称
        if(!/^[\u4e00-\u9fa5]+$/gi.test(val)){
          return;
        }else{
          keyboard.value.setCarAbc();
        }
      } else if(carCode.value.length > 0 && carCode.value.length < 7){
        // 是否字母
        if(!/\w/.test(val)) return
      }
      if(carCode.value.length === 6) codeInput.value.isFocus = false;
      if(carCode.value.length>=8) return;
      carCode.value += val;
    },
    backspace:function (){
      if(carCode.value.length){
        carCode.value = carCode.value.substr(0, carCode.value.length - 1);
        if(!carCode.value.length) keyboard.value.setCarAbc(false);
      }
    }
  })
}
</script>