vue实现输入六位密码支付页面

支付页面如下

点击确认支付，弹出输入密码框

通过键盘输入密码

 

如果点击取消则返回显示支付页面

如果点击确定则在控制台输出输入密码(根据需要进行修改) 

 

 

 具体实现代码如下

注意：代码中按钮用了mui库、CSS样式用到了SCSS插件，请自行修改

<template>
	<div :class="{all:showBol}">
		<br> <br><br><br>
		<div class="payCount">
			<h1>￥100</h1>
		</div>
		<br> <br><br><br>
		<button class="mui-btn mui-btn-primary mui-btn-block" @click="payPassword">确认支付</button>
		<div v-if="showBol" class="showToast">
			<span class="payCountText">支付密码</span>
			<div class="payCountInput">
				<input type="number" ref="psw" maxlength="6" v-model="psw" @blur="onBlur"/>
				<ul class="pwd-wrap">
					<li class="pswInput" >
						<i v-if="psw.length > 0"></i>
					</li>
					<li class="pswInput" >
						<i v-if="psw.length > 1"></i>
					</li>
					<li class="pswInput" >
						<i v-if="psw.length > 2"></i>
					</li>
					<li class="pswInput" >
						<i v-if="psw.length > 3"></i>
					</li>
					<li class="pswInput" >
						<i v-if="psw.length > 4"></i>
					</li>
					<li class="pswInput" >
						<i v-if="psw.length > 5"></i>
					</li>
				</ul>
			</div>
			<div class="payCountBtn">
				<div @click="cancelBtn">取消</div>
				<div class="sure" @click="sureBtn">确定</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "pay",
		data() {
			return {
				psw: '',
				showBol: false
			}
		},
		destroyed(){
			this.showBol = false;
		},
		methods: {
			//点击去支付
			payPassword() {
				this.showBol = true
				setTimeout(() => {
					this.$refs.psw.focus()
				}, 10);
			},

			//点击取消
			cancelBtn() {
				this.showBol = false;
				this.psw = ''
			},

			//点击支付
			sureBtn() {
				this.showBol = false
				console.log(this.psw)
				this.psw = ''
			},

			//让焦点永远保持在input标签
			onBlur(){
				if(this.showBol){
					this.$refs.psw.focus()
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.all {
		background-color: rgb(125, 125, 125);
		height: 100vh;
	}

	.payCount {
		text-align: center;
	}

	.showToast {
		position: absolute;
		top: 200px;
		left: 10px;
		width: 350px;
		height: 270px;
		background-color: white;
		text-align: center;

		.payCountText {
			display: block;
			margin-top: 25px;
			font-weight: bold;
			font-size: 25px;
		}

		.payCountInput {
			position: absolute;
			top: 90px;
			left: -42px;
			display: flex;

			input {
				width: 0.1px;
				height: 0.1px;
				color: transparent;
				border: none;
				font-size: 18px;
				opacity: 0;
				z-index: -1;
			}
			
			.pswInput {
				font-size: 50px;
				width: 50px;
				height: 50px;
				border: 1px grey solid;
			}

			.pwd-wrap {
				display: flex;

				li {
					list-style: none;
				}

				i {
					height: 12px;
					width: 12px;
					border-radius: 50%;
					background: #000;
					display: inline-block;
				}
			}
		}

		.payCountBtn {
			position: absolute;
			bottom: 0;
			width: 350px;
			display: flex;

			div {
				width: 50%;
				height: 50px;
				font-size: 24px;
				line-height: 50px;
				border: 1px grey solid;
			}

			.sure {
				color: blue;
			}
		}
	}
</style>