当前位置：首页 > VUE

vue实现分段输入

2026-03-09 22:24:41VUE

Vue 实现分段输入的方法

使用 v-model 和 computed 属性

在 Vue 中，可以通过 v-model 绑定输入框的值，并结合 computed 属性实现分段输入的效果。例如，将手机号码分成 3-4-4 的格式：

vue实现分段输入

<template>
  <input v-model="formattedPhone" placeholder="请输入手机号">
</template>

<script>
export default {
  data() {
    return {
      phone: ''
    }
  },
  computed: {
    formattedPhone: {
      get() {
        return this.phone
      },
      set(value) {
        const cleaned = value.replace(/\D/g, '')
        if (cleaned.length <= 11) {
          let formatted = cleaned
          if (cleaned.length > 3) {
            formatted = `${cleaned.slice(0, 3)}-${cleaned.slice(3)}`
          }
          if (cleaned.length > 7) {
            formatted = `${cleaned.slice(0, 3)}-${cleaned.slice(3, 7)}-${cleaned.slice(7)}`
          }
          this.phone = formatted
        }
      }
    }
  }
}
</script>

使用自定义指令

可以创建一个自定义指令来处理分段输入逻辑，使代码更可复用：

vue实现分段输入

<template>
  <input v-segment="phone" v-model="phone" placeholder="请输入手机号">
</template>

<script>
export default {
  data() {
    return {
      phone: ''
    }
  },
  directives: {
    segment: {
      bind(el, binding, vnode) {
        el.addEventListener('input', (e) => {
          const value = e.target.value.replace(/\D/g, '')
          let formatted = value
          if (value.length > 3) {
            formatted = `${value.slice(0, 3)}-${value.slice(3)}`
          }
          if (value.length > 7) {
            formatted = `${value.slice(0, 3)}-${value.slice(3, 7)}-${value.slice(7)}`
          }
          vnode.context[binding.expression] = formatted
        })
      }
    }
  }
}
</script>

使用第三方库

可以借助第三方库如 vue-input-facade 来实现更复杂的分段输入需求：

npm install vue-input-facade

<template>
  <input v-facade="'###-####-####'" v-model="phone" placeholder="请输入手机号">
</template>

<script>
import { facade } from 'vue-input-facade'
export default {
  data() {
    return {
      phone: ''
    }
  },
  directives: { facade }
}
</script>

动态分段输入

对于需要动态分段的场景，比如银行卡号每 4 位分段，可以通过监听输入事件动态处理：

<template>
  <input v-model="cardNumber" @input="formatCardNumber" placeholder="请输入银行卡号">
</template>

<script>
export default {
  data() {
    return {
      cardNumber: ''
    }
  },
  methods: {
    formatCardNumber() {
      const value = this.cardNumber.replace(/\D/g, '')
      this.cardNumber = value.replace(/(\d{4})(?=\d)/g, '$1 ')
    }
  }
}
</script>

这些方法可以根据具体需求选择使用，灵活实现各种分段输入效果。

标签: vue