vue 输入电话号码自动按3-4-4分割功能的实现代码

实现输入电话号码自动按照 3-4-4 的格式分割，可以通过 Vue 自定义指令实现。以下是具体步骤：

1. 创建自定义指令

在 Vue 中创建自定义指令可以通过 Vue.directive 方法实现。该方法有两个参数，第一个参数是指令名称，第二个参数是指令回调函数。

Vue.directive('phone', {
  bind: function(el, binding, vnode) {
    // TODO
  }
})

在这里，指令名称为 phone，指令回调函数在 bind 阶段调用。

2. 编写指令回调函数

指令回调函数 bind 中传递了三个参数，分别为 el、binding 和 vnode。其中，el 是指元素对象，binding 是一个对象，包含了该指令的一些属性。我们需要监听输入事件，每次输入时获取输入值并根据 3-4-4 的规则插入分隔符 -。

Vue.directive('phone', {
  bind: function(el, binding, vnode) {
    el.addEventListener('input', function() {
      let val = el.value
      val = val.replace(/[^\d]/g, '') // 去掉非数字字符

      if (val.length > 3 && val.length <= 7) {
        val = val.slice(0, 3) + '-' + val.slice(3)
      } else if (val.length > 7) {
        val = val.slice(0, 3) + '-' + val.slice(3, 7) + '-' + val.slice(7)
      }

      el.value = val
    })
  }
})

上述代码中使用了正则表达式去掉了字符串中的非数字字符，然后根据输入值的长度插入 - 分隔符。

3. 使用自定义指令

在 HTML 中使用自定义指令 v-phone，即可实现电话号码分割的功能。

<template>
  <div>
    <label>电话号码：</label>
    <input type="text" v-phone>
  </div>
</template>

上述代码中的 input 元素上，我们使用了自定义指令 v-phone，这样输入的电话号码就会被自动分割。

示例说明

下面是两个实例，第一个是只有数字输入框，第二个是结合 iview 输入框使用。

示例1：

<template>
  <div>
    <label>电话号码：</label>
    <input type="text" v-phone>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

示例2：

<template>
  <div>
    <i-input v-model="phone" v-phone></i-input>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      phone: ''
    }
  }
}
</script>

上述代码中，第一个示例是一个普通的输入框，输入的电话号码会被自动分割。第二个示例是基于 iview 的输入框，同样使用了自定义指令 v-phone 实现了电话号码的分割。