jobslink-user-clent/components/p-valid-code/p-valid-code.vue

<!-- 
自定义验证码输入、密码输入使用
 
使用方法：
maxlength：输入最大长度
isPwd：是否是密码模式
@finish：回调函数
 <validcode :maxlength="4" :isPwd="false" @finish="finish"></validcode>
 -->
<template>
	<view class="code-area">
		<view class="flex-box">
			<input :value="val" type="number" :focus="true" :maxlength="maxlength" class="hide-input" @input="getVal" @focus="focus"
			 @blur="blur" />
			<view :key="index" v-for="(i,index) in maxlength - 1" v-bind:class="['item', { active: focusing && codeIndex === index }]">
				<view class="line"></view>
				<block v-if="val.length - 1 < index"></block>
				<block v-else-if="isPwd">
					<text class="dot">.</text>
				</block>
				<block v-else> {{ val[index] }}</block>
			</view>
			<view v-bind:class="['item', { active: focusing && codeIndex >= maxlength - 1 }]">
				<view class="line" v-if="val.length - 1 < maxlength - 1"></view>
				<block v-else-if="isPwd">
					<text class="dot">.</text>
				</block>
				<block v-else> {{ val[maxlength - 1] }}</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			//最大长度 值为4或者6
			maxlength: {
				type: Number,
				default: 4
			},
			//是否是密码
			isPwd: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				focusing: true,
				val: '', //输入框的值
			};
		},
		methods: {
			//取值
			getVal(e) {
				let {
					value
				} = e.detail;
				if (value.length <= this.maxlength) {
					this.val = value;
				}
			},
			//清除验证码或者密码
			clear() {
				this.val = "";
			},
			blur() {
				this.focusing = false
			},
			focus() {
				this.focusing = true
			}
		},
		computed: {
			codeIndex() {
				return this.val.length
			}
		},
		watch: {
			val(val) {
				if (val.length === this.maxlength) {
					this.$emit('finish', val);
				}
			}
		}
	};
</script>

<style lang="scss">
	.code-area {
		text-align: center;

		.flex-box {
			display: flex;
			flex-wrap: wrap;
			position: relative;
			justify-content: space-between;
		}

		.item {
			position: relative;
			width: 80upx;
			height: 80upx;
			margin-right: 18upx;
			font-size: 30upx;
			font-weight: bold;
			color: #333333;
			line-height: 80upx;
			box-sizing: border-box;
			border: 2upx solid #cccccc;
		}

		.item:last-child {
			margin-right: 0;
		}

		.active {
			border-color: #1B66FF
		}

		.active .line {
			display: block;
		}

		.line {
			display: none;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 2upx;
			height: 40upx;
			background: #1B66FF;
			animation: twinkling 1s infinite ease;
		}

		.hide-input {
			position: absolute;
			top: 0;
			left: -100%;
			width: 200%;
			height: 100%;
			text-align: left;
			z-index: 9;
			opacity: 1;
		}

		@keyframes twinkling {
			0% {
				opacity: 0.2;
			}

			50% {
				opacity: 0.5;
			}

			100% {
				opacity: 0.2;
			}
		}

		.dot {
			font-size: 80upx;
			line-height: 40upx;
		}
	}
</style>