vue实现分段输入
分段输入实现方法
在Vue中实现分段输入通常指将长文本分成多个部分逐步输入或展示，常见于验证码、银行卡号等场景。以下是几种实现方式：
使用v-model和计算属性
通过计算属性拆分输入值并绑定到多个输入框：
<template>
<div>
<input v-for="(segment, index) in segments"
:key="index"
v-model="segments[index]"
@input="handleInput(index, $event)"
maxlength="4">
</div>
</template>
<script>
export default {
data() {
return {
segments: ['', '', '', '']
}
},
computed: {
fullValue() {
return this.segments.join('')
}
},
methods: {
handleInput(index, event) {
if (this.segments[index].length === 4 && index < this.segments.length - 1) {
this.$refs[`input${index + 1}`][0].focus()
}
}
}
}
</script>使用自定义指令
创建指令自动处理焦点转移：
Vue.directive('focus-next', {
inserted(el, binding) {
el.addEventListener('input', (e) => {
if (e.target.value.length >= binding.value) {
const next = el.nextElementSibling
if (next) next.focus()
}
})
}
})第三方组件
使用专门的分段输入组件如vue-smooth-input：
import SmoothInput from 'vue-smooth-input'
export default {
components: {
SmoothInput
},
template: `
<smooth-input
v-model="code"
:segments="4"
:segment-length="4"
separator="-"
/>
`
}样式优化技巧
添加CSS改善分段输入外观：
.segment-input {
display: inline-block;
width: 50px;
height: 60px;
text-align: center;
margin: 0 5px;
font-size: 24px;
border: 1px solid #ccc;
border-radius: 4px;
}
.segment-input:focus {
border-color: #42b983;
outline: none;
}验证处理
添加验证逻辑确保输入完整性：
methods: {
validateInput() {
return this.segments.every(segment => segment.length === 4)
},
submitForm() {
if (!this.validateInput()) {
alert('请完整填写所有分段')
return
}
// 提交逻辑
}
}移动端优化
针对移动设备的改进方案：
<input type="tel" pattern="[0-9]*" inputmode="numeric">这种实现方式适合需要分步骤收集信息的场景，如支付验证、身份认证等流程。根据具体需求可选择不同复杂程度的实现方案。
