11

components/p-valid-code/p-valid-code.vue

@@ -0,0 +1,168 @@
+<!-- 
+自定义验证码输入、密码输入使用
+ 
+使用方法：
+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>