【Uni-App】uniapp使用uview实现弹出键盘输入密码/验证码功能

目录

    • （一）效果图
    • （二）使用组件说明
    • keyboard属性：
    • keyboard事件：
    • （五）js代码实现

（一）效果图

【Uni-App】uniapp使用uview实现弹出键盘输入密码/验证码功能

（二）使用组件说明

组件使用的是uview组件，Keyboard 键盘和MessageInput 验证码输入两个组件配合使用。

 <u-keyboard
        closeOnClickOverlay
        :focus="true"
        ref="uKeyboard"
        :tooltip="false"
        :random="true"
        mode="number"
        :dotDisabled="true"
        :show="popupShowPay"
        @change="onChange"
        @backspace="onBackspace"
        @close="popupShowPay = false"
      >
        <view class="qinshuru">请输入支付密码</view>
        <u-code-input v-model="payPassword" :maxlength="6" dot size="80"></u-code-input>
 </u-keyboard>

keyboard属性：

通过mode参数定义键盘的类型，v-model绑定一个值为布尔值的变量，我绑定的是showKeyboard变量，控制键盘的弹出与收起；
mode = number (默认值)为数字键盘，此时顶部工具条中间的提示文字为"数字键盘"
mode = car 为汽车键盘，此时顶部工具条中间的提示文字为"车牌号键盘"
mode = card 为身份证键盘，此时顶部工具条中间的提示文字为"身份证键盘"

通过tooltip参数配置是否显示显示顶部的工具条，默认为true
通过tips参数修改工具条中间的提示文字
通过show-tips可以控制是否显示工具条中间的文字
通过cancelBtn参数配置是否显示工具条左边的"取消"按钮
通过confirmBtn参数配置是否显示工具条右边的"完成"按钮

通过dot-enabled(默认为true)参数配置，设置是否显示键盘的点(“.”)按键，只在"mode = number"时生效，因为车牌号和身份证键盘，用不到"."这个按键

设置default 属性，内容将会显示键盘的工具条上面，可以结合MessageInput 验证码输入组件实现类似支付宝输入密码时，上方显示输入内容的功能，也就是放在u-keyboard标签内的view和u-message-input标签

keyboard事件：

输入值是通过组件的change事件实现的，组件内部每个按键被点击的时候，组件就会发出一个change事件，回调参数为点击的按键的值。

通过backspace事件监听键盘退格键的点击，通过修改父组件的值实现退格的效果，见下方示例
注意：点击退格键(也即删除键)不会触发change事件

（五）js代码实现

数据：

data() {
		return {
			 popupShowPay: false,
			payPassword: ''//输入的密码
		}
	},

事件：
按钮点击显示：

async save() {
      const params = {
        price: this.price,
        blindBoxId: this.blindboxId,
        payPassword: this.payPassword,
      }
      const res = await this.$http.sales.upBlindbox(params)
      this.$refs.upDialogRef.isShowDialog = false
      this.popupShowPay = false
      this.getProductDetail()
    },

 confirmUpDown() {
      this.popupShowPay = true
      this.payPassword = ''
      this.$refs.upDialogRef.isShowDialog = false
      // return
    },
    onBackspace(e) {
      if (this.payPassword.length > 0) {
        this.payPassword = this.payPassword.substring(0, this.payPassword.length - 1)
      }
    },
    onChange(val) {
      if (this.payPassword.length < 6) {
        this.payPassword += val
      }
      if (this.payPassword.length >= 6) {
        this.finish() //封装的结束函数，后续还有请求接口和判断
      }
    },
    finish() {
      this.showKeyboard = false
      //可以放请求的接口及付款后的判断等
      this.save()
    },
标签 , ,

发表回复