更新记录

1.0.5(2023-06-02)

  1. [修复]修复在支付宝小程序不显示问题
  2. [新增]支持 vue3 调用;使用的时候和 vue2 有一点点区别,请注意查看使用文档

1.0.4(2023-06-02)

  1. [新增]支持 vue3 调用;使用的时候和 vue2 有一点点区别,请注意查看使用文档

1.0.3(2023-06-02)

  1. [修复]修复在支付宝小程序不显示问题
查看更多

平台兼容性

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

自定义数字键盘

1. 实现的功能

支持金额、数字、手机号、身份证号输入的键盘,使用方法简单。

2. 示例

2.1 基本使用

<div class="content">
  <div>页面中的值:{{inputValue}}</div>
  <div>
    <span @click="show = true">点我调用键盘</span>
  </div>
  <!-- #ifdef VUE3 -->
  <!-- vue3一定要用 @update:show 在方法中更新状态;vue3中不支持.sync,所以.... -->
  <v-keyboard :show="show" @update:show="flag => show = flag" v-model="inputValue" />
  <!-- #endif -->

  <!-- #ifdef VUE2 -->
  <!-- vue2的用法 -->
  <v-keyboard :show.sync="show" :value.sync="inputValue" />
  <!-- #endif -->
</div>
export default {
  data() {
    return {
      show: false,
      inputValue: ''
    }
  }
}

2.2 使用手机号输入好,自动触发方法

主要是 type='tel'maxLength 的配合使用,再加上 @confirm 的回调

<div>
  <span @click="show = true">点我调用键盘:{{ inputValue }}</span>
</div>
<v-keyboard type="tel" :show.sync="show" :value.sync="inputValue" @confirm="onConfirm" :max-length="11"></v-keyboard>
export default {
  data() {
    return {
      show: false,
      inputValue: ''
    }
  },
  methods: {
    onConfirm(value) {
      alert(`当前输入完成,输入的内容是:${value}`)
    }
  }
}

3. 使用说明文档

3.1 属性说明

参数 类型 默认值 是否必传 说明
value String | Number '' 当前输入的内容
mask Boolean false 是否显示遮罩
type String 'digital' 类型选择(digital:数字,idcard:身份证,tel:手机号)
auto Boolean false 当长度和设置的maxLength相等时,触发confirm回调
tool Boolean false 是否显示工具栏
show Boolean false 是否显示键盘
text String '数字键盘' 工具栏上的文字提示
maxLength Number 0 能输入的最大长度,0不限制
confirmText String '确认' 确认按钮的文字

3.2 事件说明

名称 参数 说明
confirm 点击确认按钮

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

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