caimei-applets-hehe/components/vcode-input/vcode-input.vue

<template>
	<view class="vcode-input-body">
		<text
			class="vcode-input-item"
			:class="{
				'vcode-input-line': isBorderLine,
				'vcode-input-border': !isBorderLine,
				'on': textLength === index && focus
			}"
			v-for="(v, index) in sum"
			:key="index"
			@tap.stop="setFocus"
			:style="{
				borderColor:
					text.length === index && focus
						? borderActiveColor
						: text.length > index
						? borderValueColor
						: borderColor,
				color: text.length > index ? borderValueColor : borderColor
			}"
		>
			{{ text[index] ? text[index] : '' }}
		</text>
		<view class="hidden-input">
			<input
				id="vcodeInput"
				ref="vcodeInput"
				type="number"
				:show-confirm-bar="false"
				auto-blur
				:focus="focus"
				:maxlength="sum"
				v-model="value"
				@blur="setBlur"
				:password="isPassword"
				placeholder="验证码"
			/>
		</view>
	</view>
</template>

<script>
export default {
	name: 'VcodeInput',
	props: {
		sum: {
			type: Number,
			default: 6
		},
		isBorderLine: {
			type: Boolean,
			default: false
		},
		borderColor: {
			type: String,
			default: '#e8e8e8'
		},
		borderValueColor: {
			type: String,
			default: '#424456'
		},
		borderActiveColor: {
			type: String,
			default: '#FF6B00'
		},
		isAutoComplete: {
			type: Boolean,
			default: true
		},
		isPassword: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			focus: false,
			text: [],
			value: ''
		}
	},
	watch: {
		value(value, oldVal) {
			this.$emit('vcodeChange', value)
			if (this.isAutoComplete) {
				if (value.length >= this.sum) {
					this.focus = false
					this.$emit('vcodeInput', value)
				}
			} else {
				this.$emit('vcodeInput', value)
			}
			if (this.isPassword) {
				let val = ''
				for (let i = 0; i < value.length; i++) {
					val += '●'
				}
				this.text = val
			} else {
				this.text = value.split('')
			}
		}
	},
	computed:{
		textLength(){
			return this.text.length
		}
	},
	mounted() {
		this.$nextTick(() => {
			this.initInput()
		})
	},
	methods: {
		initInput() {
			this.focus = true
			// #ifdef H5
			this.$refs.vcodeInput.$refs.input.setAttribute('type', 'number')
			this.$refs.vcodeInput.$refs.input.setAttribute('pattern', '[0-9]*')
			// #endif
		},
		setBlur() {
			this.$nextTick(() => {
				this.focus = false
			})
		},
		setFocus() {
			this.focus = !this.focus
		},
		clearValue() {
			this.value = ''
		}
	}
}
</script>

<style lang="scss" scoped>
@keyframes cursorflash {
	0%{
		opacity: .2;
	}
	50%{
		opacity: .8;
	}
	100%{
		opacity:.2;
	}
}
.vcode-input-body {
	margin-left: -36rpx;
	margin-right: -36rpx;
	position: relative;
	overflow: hidden;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.vcode-input-item {
	width: 76rpx;
	height: 76rpx;
	margin-left: 12rpx;
	margin-right: 12rpx;
	line-height: 76rpx;
	text-align: center;
	font-weight: 500;
	color: #c4761f !important;
	border-radius: 4rpx;
}
.vcode-input-item.on::after {
	content: '|';
	animation: cursorflash 2s infinite ease-in-out;
}
.vcode-input-border {
	border-style: solid;
	border-width: 2rpx;
	border-color: $uni-border-color;
	border-radius: 4rpx;
}
.vcode-input-line {
	border-bottom-style: solid;
	border-bottom-width: 2rpx;
	border-color: $uni-border-color;
}
.hidden-input {
	width: 0px;
	height: 0px;
	position: absolute;
	left: -1px;
	top: -1px;
	overflow: hidden;
}
</style>