uni-app 自定义支付密码键盘

1.新建最贱 payKeyboard .vue

javascript 复制代码
<template>
	<view class="page-total" v-show="isShow">
		<view class="key-list">
			<view class="list" v-for="(item,index) in keyList" 
			:class="{'special':item.keyCode==190||item.keyCode==8,'payMoney':item.keyCode==88}"
			@click="onKeyList(item,index)"
			:key="item.keyCode">
				<text>{{item.key}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false,
				keyList: [
					{
						key: 1,
						en: '',
						keyCode: 49,
					},{
						key: 2,
						en: 'ABC',
						keyCode: 50,
					},{
						key: 3,
						en: 'ABC',
						keyCode: 51,
					},{
						key: 4,
						en: 'ABC',
						keyCode: 52,
					},{
						key: 5,
						en: 'ABC',
						keyCode: 53,
					},
					
					{
						key: 6,
						en: 'ABC',
						keyCode: 54,
					},{
						key: 7,
						en: 'ABC',
						keyCode: 55,
					},{
						key: 8,
						en: 'ABC',
						keyCode: 56,
					},
					{
						key: '删除',
						en: 'Del',
						keyCode: 8,
					},
					{
						key: 9,
						en: 'ABC',
						keyCode: 57,
					},{
						key: 0,
						en: 'ABC',
						keyCode: 48,
					},{
						key: '确定',
						en: 'Pay',
						keyCode: 88,
					},
				],
				keyIndex: -1,
			};
		},
		props:{
			passwrdType: {
				type: String,
				default: 'pay'
			}
		},
		methods:{
			show(){
				this.isShow = true;
			},
			hide(){
				this.isShow = false;
			},
			/**
			 * 密码键盘按下
			 * @param {Object} item
			 * @param {Number} index
			 */
			onKeyList(item,index){
				let KeyInfo = item;	
				// 删除键
				if(KeyInfo.keyCode === 8 && this.keyIndex > -1){
					this.keyIndex--;
				}
				// 不是删除键
				if(KeyInfo.keyCode != 8){
					if(this.passwrdType == 'pay' && this.keyIndex >= 5){
						console.log('键盘');
						this.keyIndex = -1;
						return;
					}else{
						this.keyIndex = -1;
					}
					this.keyIndex++;
				}
				KeyInfo.index = this.keyIndex;
				this.$emit('KeyInfo',KeyInfo);
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'cc-payKeyboard.scss';
</style>

2.引用

<PayKeyboard ref="codeKeyboard" passwrdType="pay" @KeyInfo="KeyInfo">

javascript 复制代码
import PayKeyboard  from "@/components/payKeyboard.vue"

<view>
<view>
<text v-show="AffirmStatus === 1">请设置6位支付密码</text>
<text v-show="AffirmStatus >= 2">请确认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>


const codeKeyboard = ref(null)
	const passwordArr = ref([])
	const newPasswordArr = ref("")
	const AffirmStatus = ref("")
	const passwordArr = ref([])
//支付密码
	function onPayUp() {
		codeKeyboard.value.show();
	}
	/**
	 * 支付键盘回调
	 * @param {Object} val
	 */
	function KeyInfo(val) {
		if (val.index >= 6) {
			return;
		}
		// 判断是否输入的是删除键
		if (val.keyCode === 8) {
			// 删除最后一位
			passwordArr.value.splice(val.index + 1, 1)
		}
		// 判断是否输入的是.
		else if (val.keyCode == 190) {
			// 输入.无效
		} else {
			if(passwordArr.value.length<=6){
				passwordArr.value.push(val.key);
			}
		}
		if (val.keyCode == 88) {
			let pass = parseInt(passwordArr.value.join(""));
			console.log(pass)
			
		}
		// 判断是否等于6
	if (this.passwordArr.length === 6) {
		if (AffirmStatus.value === 1) {

			setTimeout(() => {
				passwordArr.value = [];
				AffirmStatus.value = AffirmStatus.value + 1;
				codeKeyboard..value.hide()
			}, 500)
		}
	}
	// 判断到哪一步了
	if (AffirmStatus.value === 1) {
		oldPasswordArr.value = parseInt(passwordArr.value.join(""));
	} else if (AffirmStatus.value >= 2) {
		afPasswordArr.value = parseInt(passwordArr.value.join(""));
		if (this.passwordArr.length === 6) {
		}
	}


	this.$forceUpdate();
	}
相关推荐
吃炸鸡的前端6 分钟前
el-transfer穿梭框数据量过大的解决方案
前端·javascript
耶啵奶膘15 分钟前
uniapp+vue3表格样式
uni-app
Monly2128 分钟前
vue报错:Loading chunk * failed,vue-router懒加载出错问题。
前端·javascript·vue.js
大名人儿1 小时前
【JS事件循环机制event-loop】
javascript·事件循环·宏任务·微任务·event-loop
天天扭码1 小时前
JavaScript 中 apply 和 call 方法的区别与应用场景
前端·javascript·面试
纪元A梦1 小时前
华为OD机试真题——阿里巴巴找黄金宝箱Ⅰ(2025A卷:100分)Java/python/JavaScript/C/C++/GO最佳实现
java·c语言·javascript·c++·python·华为od·go
前端啵啵猪1 小时前
基于qiankun实现子应用菜单级keep-alive
前端·javascript
徐小夕1 小时前
写了一款3D可视化编辑器模版,开源!
前端·javascript·github
忧郁的蛋~2 小时前
开发vue项目所需要安装的依赖包
前端·javascript·vue.js