Keyboard 键盘

此组件自定义的键盘面板，内含了数字键盘，车牌号键，身份证号键盘3种模式，都有可以打乱按键顺序的选项。

平台差异说明

APP	H5	微信小程序	支付宝小程序	QQ小程序	···
√	√	√	√	√	适配中

代码示例

部分功能示例，具体可参考示例程序以及文档API。

基础用法

通过 ref 获取到组件实例，调用 open 方法显示键盘面板，调用 close 方法隐藏键盘面板。

通过 mode 属性定义键盘的类型，可选值：

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

<template>
    <fu-keyboard ref="keyboardRef"></fu-keyboard>

    <fu-button @click="handleOpen">打开</fu-button>
</template>

<script setup>
    import { ref } from 'vue';

    // data数据
    const keyboardRef = ref();

    // methods方法
    const handleOpen = () => {
        keyboardRef.value.open();
    };
</script>

设置键盘顶部的工具条

• 通过 tooltip 属性设置是否显示顶部的工具条，默认为 true
• 通过 tips 属性修改工具条中间的提示文字
• 通过 showTips 属性控制是否显示工具条中间的文字
• 通过 showCancel 属性控制是否显示工具条左边的"取消"按钮
• 通过 showConfirm 属性控制是否显示工具条右边的"确定"按钮

<fu-keyboard ref="keyboardRef" mode="car" tips="请输入车牌号" :showCancel="false"></fu-keyboard>

设置是否显示键盘的点(".")按键

通过 dotDisabled 属性设置是否显示点按键，默认为 true，只有在 mode 为 number 时才生效，因为车牌号和身份证键盘，用不到"."这个按键。

<fu-keyboard ref="keyboardRef" mode="number" :dotDisabled="false"></fu-keyboard>

设置是否打乱按键顺序

通过 random 属性设置为 true 时，每次打开键盘，按键的顺序都是随机的，默认为 false。

<fu-keyboard ref="keyboardRef" mode="number" :random="true"></fu-keyboard>

如何监听键盘按键被点击？

• 输入值是通过组件的 change 事件实现的，组件内部每个按键被点击的时候，组件会触发 change 事件，并将当前输入值作为参数传递给回调函数。
• 通过 backspace 事件监听键盘退格键的点击，通过修改父组件的值实现退格的效果。

注意：点击退格键（即删除键）不会触发 change 事件

<template>
    <fu-keyboard ref="keyboardRef" @change="handleChange"></fu-keyboard>

    <fu-button @click="handleOpen">打开</fu-button>
</template>

<script setup>
    import { ref } from 'vue';

    // data数据
    const keyboardRef = ref();
    let value = ref('');

    // methods方法
    const handleOpen = () => {
        keyboardRef.value.open();
    };

    // 按键被点击（点击退格键不会触发此事件）
    const handleChange = (val) => {
        // 将每次按键的值拼接到value变量中，注意+=写法
        value.value += val;
        console.log(value.value);
    };

    // 退格键被点击
    const handleBackspace = () => {
        // 删除value变量最后一个字符
        if(value.value.length) value.value = value.value.substr(0, value.value.length - 1);
        console.log(value.value);
    };
</script>

API

Keyboard Props

属性名	说明	类型	默认值	可选值
mode	键盘类型，详见上方基础用法	String	number	number/card/car
dotDisabled	是否显示"."按键，只在mode=number时有效	Boolean	false	true
tooltip	是否显示键盘顶部工具条	Boolean	true	false
showTips	是否显示工具条中间的提示文字	Boolean	true	false
tips	工具条中间的提示文字，如不需要，请传""空字符	String	-	-
showCancel	是否显示工具条左边的"取消"按钮	Boolean	true	false
showConfirm	是否显示工具条右边的"确定"按钮	Boolean	true	false
random	是否打乱按键顺序	Boolean	false	true
safeArea	是否开启底部安全区适配	Boolean	true	false
isMaskClick	是否开启蒙层点击关闭键盘	Boolean	true	false
zIndex	键盘层级	String｜Number	1025	-
cancelText	工具条左边的"取消"按钮文字	String	取消	-
confirmText	工具条右边的"确定"按钮文字	String	确定	-

Keyboard Events

事件名	说明	回调参数
change	按键被点击（不包含退格键被点击）	() => void
cancel	工具条左边的"取消"按钮被点击	-
confirm	工具条右边的"确定"按钮被点击	-
backspace	退格键被点击	-

Keyboard Slot

名称	说明
default	内容将会显示键盘的工具条上面，可以结合CodeInput 验证码输入组件实现类似支付宝输入密码时，上方显示输入内容的功能