更新记录

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>

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

暂无用户评论。

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