vue实现分段输入
实现分段输入的需求分析
在Vue中实现分段输入通常指将输入框分成多个部分（如验证码、银行卡号分隔等），用户输入时自动跳转至下一段或格式化显示。核心需求包括：
- 动态分割输入内容
- 光标自动跳转
- 支持删除和粘贴处理
基础实现方法（基于自定义指令）
通过Vue自定义指令监听输入框事件，实现分段逻辑：
Vue.directive('segment-input', {
bind(el, binding) {
const segmentLength = binding.value || 4; // 默认每段4字符
el.addEventListener('input', (e) => {
const value = e.target.value.replace(/\s/g, '');
let formattedValue = '';
for (let i = 0; i < value.length; i += segmentLength) {
formattedValue += value.substr(i, segmentLength) + ' ';
}
e.target.value = formattedValue.trim();
});
}
});模板使用：
<input v-segment-input="4" type="text">动态跳转焦点实现
通过ref和@input事件控制多个输入框的焦点跳转：
<template>
<div>
<input
v-for="(item, index) in segments"
:key="index"
v-model="segments[index]"
@input="handleInput(index)"
:maxlength="segmentLength"
:ref="`input_${index}`"
>
</div>
</template>
<script>
export default {
data() {
return {
segments: ['', '', '', ''],
segmentLength: 4
};
},
methods: {
handleInput(index) {
if (this.segments[index].length === this.segmentLength && index < this.segments.length - 1) {
this.$refs[`input_${index + 1}`][0].focus();
}
}
}
};
</script>使用第三方库
推荐库vue-input-facade，提供格式化输入和自动跳转功能：
npm install vue-input-facade示例代码：
import { createInputMask } from 'vue-input-facade';
export default {
directives: { mask: createInputMask('#### #### ####') },
template: `<input v-mask placeholder="0000 0000 0000">`
};处理粘贴和删除
在自定义指令中增加事件监听，确保粘贴内容正确分割：
el.addEventListener('paste', (e) => {
const pasteData = e.clipboardData.getData('text').replace(/\s/g, '');
let formattedValue = '';
for (let i = 0; i < pasteData.length; i += segmentLength) {
formattedValue += pasteData.substr(i, segmentLength) + ' ';
}
e.target.value = formattedValue.trim();
e.preventDefault();
});样式优化建议
为分段输入框添加间隔样式，提升视觉效果：
.segment-input {
margin-right: 10px;
width: 40px;
text-align: center;
}关键点总结
- 自定义指令适合简单分段需求
- 多输入框+焦点跳转适合复杂场景（如验证码）
- 第三方库可快速实现格式化输入（如信用卡号）
