更新记录

1.0.1(2024-05-30) 下载此版本

文档完善

1.0.0(2024-05-30) 下载此版本

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

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


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

Keyboard 键盘

可以和 密码框配合 使用 wly-pwd-input 密码 验证码输入框

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

平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序

基本使用

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

  • mode = number (默认值)为数字键盘,此时顶部工具条中间的提示文字为"数字键盘"
  • mode = car 为汽车键盘,此时顶部工具条中间的提示文字为"车牌号键盘"
  • mode = card 为身份证键盘,此时顶部工具条中间的提示文字为"身份证键盘"
<template>
    <view>
        <wly-keyboards ref="uKeyboard" mode="car"></wly-keyboards>
    </view>
</template>

<script>
    export default {
        data() {
            return {
            }
        }
    }
</script>
<wly-keyboards mode="car" tips="请输入车牌号" :cancelBtn="false"></wly-keyboards>

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

该按键通过dot-enabled(默认为true)参数配置,只在"mode = number"时生效,因为车牌号和身份证键盘,用不到"."这个按键

<wly-keyboards ref="uKeyboard" mode="number" :dot-enabled="false"></wly-keyboards>

是否打乱按键的顺序

如果配置random参数为true的话,每次打开键盘,按键的顺序都是随机的,该功能默认是关闭的

<wly-keyboards ref="uKeyboard" mode="number" :random="true"></wly-keyboards>

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

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

注意:点击退格键(也即删除键)不会触发change事件

<template>
    <wly-keyboards mode="number" @change="valChange" @backspace="backspace"></wly-keyboards>
</template>

<script>
    export default {
        data() {
            return {
                value: '',
            }
        },
        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

注意:props中没有控制键盘弹出与收起的参数,因为这是通过v-model绑定变量实现的,见上方说明。

参数 说明 类型 默认值 可选值
mode 键盘类型,见上方基本使用的说明 String number car / card
dot-enabled 是否显示"."按键,只在mode=number时有效 Boolean true false
tooltip 是否显示键盘顶部工具条 Boolean true false
tips 工具条中间的提示文字,见上方基本使用的说明 String - -
random 是否打乱键盘按键的顺序 Boolean false true

Events

事件名 说明 回调参数 版本
change 按键被点击(不包含退格键被点击) 按键的值,见上方说明和示例 -
cancel 键盘顶部工具条左边的"取消"按钮被点击 - -
confirm 键盘顶部工具条右边的"完成"按钮被点击 - -
backspace 键盘退格键被点击 - -

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问