txCar/components/vcode-input/vcode-input.vue

<template>
	<view class="vcode-input-body">
		<text class="vcode-input-item" 
		:class="isBorderLine?'vcode-input-line':'vcode-input-border'"
		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>
		<text class="vcode-input-item" @click="addNum" v-if="addShow">+</text>
		<view class="hidden-input">
			<input
			id="vcodeInput"
			ref="vcodeInput"
			type="text" 
			:show-confirm-bar="false"
			auto-blur
			:focus="focus"
			:maxlength.sync="sum"
			v-model="value"
			@blur="setBlur"
			@focus="setFocus"
			:password="isPassword"
			placeholder="验证码"/>
		</view>
	</view>
</template>

<script>
	export default {
		name:'VcodeInput',
		props: {
			autofocus:{
				type: Boolean,
				default: true
			},
			sum:{
				type: Number,
				default: 6
			},
			isBorderLine:{
				type:Boolean,
				default:false
			},
			borderColor:{
				type:String,
				default:'#DADADA'
			},
			borderValueColor:{
				type:String,
				default:'#424456'
			},
			borderActiveColor:{
				type:String,
				default:'#FF6B00'
			},
			isAutoComplete:{
				type: Boolean,
				default: true
			},
			isPassword:{
				type: Boolean,
				default: false
			},
			plateNumber:{
				type: String,
				default: '0'
			}
		},
		data() {
			return {
				focus:false,
				text:[],
				value:'',
				addShow:true,
			};
		},
		watch:{
			value(value,oldVal){
				if(this.isAutoComplete){
					if(value.length>=this.sum){
						this.focus=false;
						//this.$emit('vcodeInput', value);
					}
					if(value.length>=this.sum-1){
						
						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{
					//console.log(value)
					this.text=value.split("");
					//console.log(this.text)
				}
			},
			plateNumber:{
			  immediate: true, // 很重要！！！
			  handler (val) {
				console.log(val.length)
				var length=val.length;
				if(length == 7||length == 0){
					this.addShow=true;
					console.log(this.addShow)
					this.$emit('setsum',7)
				}else{
					this.addShow=false;
					this.$emit('setsum',8)
				}
				this.value=val;
				this.text=val.split("");
			  }
			}
	
		},
		mounted() {
			this.$nextTick(() => {
				this.initInput()
			})
		},
		methods:{
			addNum(){
				 //触发一个更新事件
			    this.$emit('setsum',8)
				this.addShow=false;
			},
			initInput(){
				if(this.autofocus)
				this.focus=true;
				// #ifdef H5
				this.$refs.vcodeInput.$refs.input.setAttribute('type','number');
				this.$refs.vcodeInput.$refs.input.setAttribute('pattern','[0-9]*')
				// #endif
			},
			setBlur(){
				uni.hideKeyboard();
				this.$nextTick(() => {
					this.focus=false;
				})
			},
			setFocus(){
				this.focus=true;
			},
			clearValue(){
				this.setBlur();
				this.value='';
				this.text=[];
				this.$forceUpdate();
			}
		}
	}
</script>

<style lang="scss" scoped>
.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: 60rpx;
	height: 60rpx;
	margin-left: 12rpx;
	margin-right: 12rpx;
	line-height: 60rpx;
	text-align: center;
	font-weight: 500;
}
.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: 1px;
	height: 1px;
	position: absolute;
	left: -1px;
	top: -1px;
	overflow: hidden;
}
</style>