cesuan/components/phonenum.vue

<template>
	<view class="phone_code_single">
		<input class="phone_code_single_cinput" adjust-position="false" auto-blur="true" @blur="codeNumBlurFun"
			@input="codeNumInputFun" :focus="focus" v-model="code" type="number" :maxlength="strlen" />
		<view class="phone_code_single_codeinput">
			<view v-for="(item,index) in strlen" :key="index" @click="codefocusFun(index)"
				>
				{{code[index]}}
				<view v-if="index == code.length" class="bootom-line"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "phonenum",
		props: {
			strlen: {
				type: Number,
				default: 11
			},
			phonenum:{
				type: Number,
				default: ''
			}
		},
		data() {
			return {
				code: '',
				focus: true
			};
		},
		created() {
			if(this.phonenum!='')
			{
				this.code = this.phonenum;
			}
			
		},
		methods: {
			/**
			 * AUTHOR: 单乘风
			 * DESC: 输入框输入事件 
			 * */
			codeNumInputFun(e) {
				let val = e.detail.value
				this.code = val
				if (val.length == this.strlen) 
				{
					this.isCode = false;
					this.$emit('completeinput',val)   //把方法和值传递到页面   
				}
				else this.isCode = true
			},
			/**
			 * AUTHOR: 单乘风
			 * DESC: 输入框失去焦点事件 
			 * */
			codeNumBlurFun(e) {
				let val = e.detail.value
				this.focus = false
			 if (val.length == this.strlen) this.isCode = false
				else this.isCode = true
			},
			/**
			 * AUTHOR: 单乘风
			 * DESC: 输入框点击事件
			 * @param {Number} index 当前点击框索引
			 * */
			codefocusFun(index) {
				this.focus = true
			},
		}
	}
</script>

<style lang="scss" scoped>
	.phone {
		background-color: #FFF;
		width: 100%;

		&_code {
			padding: 30rpx;

			&_label {
				font-size: 30rpx;
				color: #999;
			}

			&_count {
				margin-top: 30rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				height: 100rpx;

				&_new {
					color: #e64340;
					font-size: 38rpx;
					font-weight: bold;
				}

				&_down {
					border: 1rpx solid #eee;
					border-radius: 10rpx;
					color: #999;
					height: 60rpx;
					line-height: 60rpx;
					padding: 0 20rpx;

					text {
						margin-left: 10rpx;
					}
				}
			}

			&_single {
				&_cinput {
					position: fixed;
					left: -100rpx;
					width: 50rpx;
					height: 50rpx;
				}

				&_codeinput {
					margin: auto;
					width: 100%;
					display: flex;
					justify-content: space-between;
				}

				&_codeinput>view {
					width: 100%;
					height: 75rpx;
					line-height: 75rpx;
					font-size: 36rpx;
					font-weight: bold;
					color: #313131;
					text-align: center;
					border:1px solid rgba(0,0,0,0.1);
					position: relative;
					text-align: center;
					display: flex;
					justify-content: center;
				}

				&_codeinput>view:nth-child(1) {
					margin-left: 0rpx;
				}
			}
		}
	}
	
	.bootom-line
	{
		border-bottom: 2px solid red;
		position: absolute;
		bottom: 4rpx;
		width: 30rpx;
		margin: 0 5rpx;
	}
</style>