更新记录

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. [修复]修复在支付宝小程序不显示问题

平台兼容性

自定义数字键盘

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 属性说明

3.2 事件说明