前端Vue自定义支付密码输入键盘Keyboard和支付设置输入框Input

前端Vue自定义支付密码输入键盘Keyboard和支付设置输入框Input, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13166

效果图如下:

前端Vue自定义支付密码输入键盘Keyboard和支付设置输入框Input_第1张图片

前端Vue自定义支付密码输入键盘Keyboard和支付设置输入框Input_第2张图片

前端Vue自定义支付密码输入键盘Keyboard和支付设置输入框Input_第3张图片

前端Vue自定义支付密码输入键盘Keyboard和支付设置输入框Input_第4张图片

# cc-defineKeyboard

#### 使用方法

```使用方法

/** * 唤起键盘 */

onPayUp() {

this.$refs.CodeKeyboard.show();

},

/*** 支付键盘回调* @param {Object} val */

KeyInfo(val) {

if (val.index >= 6) {

return;

}

// 判断是否输入的是删除键

if (val.keyCode === 8) {

// 删除最后一位

this.passwordArr.splice(val.index + 1, 1)

}

// 判断是否输入的是.

else if (val.keyCode == 190) {

// 输入.无效

} else {

this.passwordArr.push(val.key);

}

uni.showModal({

title: '温馨提示',

content: '输入密码是 = ' + JSON.stringify(this.passwordArr)

})

}

```

#### HTML代码实现部分

```html

```

你可能感兴趣的:(前端,vue.js,javascript,前端框架,uni-app,ecmascript,html5)