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

这篇具有很好参考价值的文章主要介绍了前端Vue自定义支付密码输入键盘Keyboard和支付设置输入框Input。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前端Vue自定义支付密码输入键盘Keyboard和支付设置输入框Input, 阅读全文下载完整代码请关注微信公众号: 前端组件开发

效果图如下:

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

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

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

前端Vue自定义支付密码输入键盘Keyboard和支付设置输入框Input文章来源地址https://www.toymoban.com/news/detail-496310.html

cc-defineKeyboard

使用方法


<!-- ref:唯一ref  passwrdType:密码样式pay keyInfo:密码输入监测事件 -->

<cc-defineKeyboard ref="CodeKeyboard" passwrdType="pay" @KeyInfo="KeyInfo"></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代码实现部分


<template>

<view class="page">

<view>

<view class="pay-title">

<text v-show="AffirmStatus === 1">请输入6位支付密码</text>

<text v-show="AffirmStatus === 2">请设置6位支付密码</text>

<text v-show="AffirmStatus === 3">请确认6位支付密码</text>

</view>

<view class="pay-password" @click="onPayUp">

<view class="list">

<text v-show="passwordArr.length >= 1">●</text>

</view>

<view class="list">

<text v-show="passwordArr.length >= 2">●</text>

</view>

<view class="list">

<text v-show="passwordArr.length >= 3">●</text>

</view>

<view class="list">

<text v-show="passwordArr.length >= 4">●</text>

</view>

<view class="list">

<text v-show="passwordArr.length >= 5">●</text>

</view>

<view class="list">

<text v-show="passwordArr.length >= 6">●</text>

</view>

</view>

<view class="hint">

<text>忘记支付密码?</text>

</view>

</view>

<!-- ref:唯一ref  passwrdType:密码样式pay keyInfo:密码输入返回事件 -->

<cc-defineKeyboard ref="CodeKeyboard" passwrdType="pay" @KeyInfo="KeyInfo"></cc-defineKeyboard>

</view>

</template>

<script>

export default {

components: {

},

data() {

return {

AffirmStatus: 1,

passwordArr: [],

oldPasswordArr: [],

newPasswordArr: [],

afPasswordArr: [],

};

},

onLoad() {

},

methods: {

/**

* 唤起键盘

*/

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)

})

// 判断是否等于6

if (this.passwordArr.length === 6) {

this.passwordArr = [];

this.AffirmStatus = this.AffirmStatus + 1;

}

// 判断到哪一步了

if (this.AffirmStatus === 1) {

this.oldPasswordArr = this.passwordArr;

} else if (this.AffirmStatus === 2) {

this.newPasswordArr = this.passwordArr;

} else if (this.AffirmStatus === 3) {

this.afPasswordArr = this.passwordArr;

} else if (this.AffirmStatus === 4) {

console.log(this.oldPasswordArr.join(''));

console.log(this.newPasswordArr.join(''));

console.log(this.afPasswordArr.join(''));

uni.showToast({

title: '修改成功',

icon: 'none'

})

setTimeout(() => {

uni.navigateBack();

}, 2000)

}

this.$forceUpdate();

}

}

}

</script>

<style scoped lang="scss">

$base: orangered; // 基础颜色

.page {

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

background-color: #FFFFFF;

}

.pay-title {

display: flex;

align-items: center;

justify-content: center;

width: 100%;

height: 200rpx;

text {

font-size: 28rpx;

color: #555555;

}

}

.pay-password {

display: flex;

align-items: center;

width: 90%;

height: 80rpx;

margin: 20rpx auto;

border: 2rpx solid $base;

.list {

display: flex;

align-items: center;

justify-content: center;

width: 16.666%;

height: 100%;

border-right: 2rpx solid #EEEEEE;

text {

font-size: 32rpx;

}

}

.list:nth-child(6) {

border-right: none;

}

}

.hint {

display: flex;

align-items: center;

justify-content: center;

width: 100%;

height: 100rpx;

text {

font-size: 28rpx;

color: $base;

}

}

</style>

到了这里,关于前端Vue自定义支付密码输入键盘Keyboard和支付设置输入框Input的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包