更新记录

1.0.0（2020-07-13） 下载此版本

支持组件复用 密码输入和数字键盘输入

平台兼容性

lingdang-input-number-keyboard插件是针对解决uni-app在ios环境下的纯数字键盘调不出来的问题

构成

1、采用uni-app官方脚手架搭建项目底层结构

2、引入[numberKeyboard] import numberKeyboard from '@/components/number-keyboard/number-keyboard.vue'),以便使用自定义键盘

3、引入[passwordInput] import passwordInput from '@/components/password-input/password-input.vue',以便使用自定义密码输入

4、引入组件，记得[挂载] components: {numberKeyboard, passwordInput},

5、父页面中，需要 [写入组件1] <password-input :dataKey='0' :numLng='valArr[0].val'></password-input> [写入组件2] <number-keyboard tabBar ref='KeyboarHid' v-model="value" @input='clickInput' :psdLength='valArr[currentKey].lng'></number-keyboard>

6、父页面中，设置传给自组件的值 [传值](password: "", value: "", currentKey: 0, valArr: [{ val: '', lng: 8 }, { val: '', lng: 11 }, { val: '', lng: 4 }, { val: '', lng: 6 }, { val: '', lng: 8 }],)

password//输入的内容 value//输入框的值 currentKey//当前选中的data-key值 valArr.val//传给子组件的值 valArr.lng//传给子组件可以输入的长度

7、父页面中，函数设置 `KeyboarOpen(e) { //打开键盘 console.log(e) let eq = e.target.dataset.key || e.currentTarget.dataset.key; console.log(eq) this.currentKey = eq;

this.value = this.valArr[this.currentKey].val
this.$refs.KeyboarHid.open()

}, //输入的值 clickInput(val) { this.valArr[this.currentKey].val = val }, KeyboarClose(e) { this.$refs.KeyboarHid.close(); },`

注意项：

1、如果需要一进如页面就弹起键盘则 --> onLoad: function(options) { //因为此时实例没有挂载完成，需要延迟操作 // setTimeout(() => { // this.$refs.KeyboarHid.open() // }, 50) },

2、为了组件可以复用 <input data-key='2'。。。需要加上 data-key， 而密码输入data-key的值是获取不到了，所以需要 <view class="right" @tap.stop='KeyboarOpen' data-key='0'><password-input :numLng='valArr[0].val'></password-input></view>