简易激活码输入框组件

<template>
	<div id="splitContainer" ref="itemRef">
		<span v-for="(item,index) in valueArr" :key="index">
			<el-input
				class="splitInput"
				maxlength="4"
				v-model="item.value"
				@input="onChange($event,index)"
				@keyup="onControl($event,index)"
				@keydown="onControl($event,index)"
				:ref="(el)=>setItemRef(el, index)"
			/>
			<span class="separate" v-if="!(index === props.inputNum - 1)">-</span>
		</span>
	</div>
</template>
 
<script setup>
import { ref,nextTick,onMounted } from 'vue'

/* 接收父组件传来的值 */
const props = defineProps({
	inputNum:{/* input的数量，每个input只允许输入4位 */
		type:Number
	},
	code:{
		type:String
	}
})

let message = ref()

const emit = defineEmits(['update:code'])

/* 用于存放渲染input的value */
let valueArr = ref([])
const itemRef = ref({})
/* 返回父组件的值 */
let returnValue = ''

for(var i = 0 ;i<props.inputNum;i++){
	valueArr.value.push({
		value:props.code.slice(i*4,i*4+4)
	})
}
const setItemRef = function(el, key){
	itemRef.value[key] = el
}

const onChange = function(e,index){
	mergeValue()
	emit('update:code', returnValue)
}

const onControl = function(e,index){
//  获取键盘控制事件：Backspace、ArrowLeft、ArrowRight
	switch (e.code) {
		case "Backspace":
			if (valueArr.value[index].value === '') {
				mergeValue()
				if (index === 0) {
					return
				}
				nextTick(() => {
					itemRef.value[(index - 1)].focus()
				})
			}
			break
		case "ArrowLeft":
			if (index === 0) return
			if (e.srcElement.selectionStart === 0) {
				nextTick(() => {
					itemRef.value[(index - 1)].focus()
				})
			}
			break
		case "ArrowRight":
			if (index == props.inputNum-1) {
				return
			}
			if (e.srcElement.selectionStart === e.srcElement.value.length) {
				nextTick(() => {
					itemRef.value[(index + 1)].focus()
				})
			}
			break
		default:
			if (index == props.inputNum-1) {
				return
			}
			if(valueArr.value[index].value.length === 4){
				if (e.srcElement.selectionStart === e.srcElement.value.length) {
					nextTick(() => {
						itemRef.value[(index + 1)].focus()
					})
				}
			}
	}
}
/* 拼接valueArr的值 */
const mergeValue = function(){
	returnValue = ''
	for(var i = 0 ;i<valueArr.value.length;i++){
		returnValue += valueArr.value[i].value
	}
}

/* 添加粘贴事件 */
onMounted(()=>{
	document.getElementById('splitContainer').addEventListener('paste',function(event){
		let pasteValue = (event.clipboardData || window.clipboardData).getData('text').trim();
		if(pasteValue.length == props.inputNum*4){
			/* 禁止默认事件 */
			event.preventDefault();
			for(var j = 0 ; j < 4 ; j++){
				valueArr.value[j].value = pasteValue.slice(j*4,j*4+4);
			}
			onChange()
		}
	})
})

</script>
 
<style scoped>
#splitContainer{
	width: 100%;
	margin: 5rem auto;
}

.splitInput{
	width: 10rem;
}

.separate{
	/* float: right; */
	margin: auto 0.5rem;
	line-height: 25px;
}

:deep(.el-input__inner){
	text-align: center;
}
:deep(.el-input__inner){
	font-size: 1rem;
}
:deep(.el-button){
	font-size: 1rem;
}
</style>

参考：vue3 element-plus IP地址输入框_elementui ip输入框-优快云博客