Skip to content

Latest commit

 

History

History
86 lines (71 loc) · 2.84 KB

readme.md

File metadata and controls

86 lines (71 loc) · 2.84 KB

自定义数字键盘

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 点击确认按钮