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">

这种实现方式适合需要分步骤收集信息的场景，如支付验证、身份认证等流程。根据具体需求可选择不同复杂程度的实现方案。