VUE3输入框格式化(xxx) xxx-xxxx

以下是使用 Vue 3 中的 Composition API 对输入框进行格式化的代码示例：

<template>
  <div>
    <label for="phone">Phone:</label>
    <input id="phone" v-model="formattedPhone" @input="onPhoneInput" />
  </div>
</template>

<script lang="ts">
import { ref, watch } from 'vue';

export default {
  setup() {
    const phone = ref('');
    const formattedPhone = ref('');

    const formatPhone = (value: string) => {
      const regex = /^(\d{0,3})(\d{0,3})(\d{0,4})$/;
      const match = value.match(regex);
      if (match) {
        formattedPhone.value = `(${match[1]}) ${match[2]}-${match[3]}`;
      } else {
        formattedPhone.value = value;
      }
    };

    const onPhoneInput = (event: InputEvent) => {
      const target = event.target as HTMLInputElement;
      const value = target.value.replace(/\D/g, '');
      phone.value = value;
    };

    watch(phone, (value: string) => {
      formatPhone(value);
    });

    return {
      phone,
      formattedPhone,
      onPhoneInput,
    };
  },
};
</script>

解释一下：

- 我们使用 Vue 3 中的 Composition API 来编写组件。
- `phone` 和 `formattedPhone` 都是响应式变量，分别保存未格式化和格式化后的电话号码。
- `formatPhone` 函数接受一个字符串参数 `value`，将其格式化为 `(xxx) xxx-xxxx` 的电话号码，并将其保存在 `formattedPhone` 变量中。
- 正则表达式 `^(\d{0,3})(\d{0,3})(\d{0,4})$` 匹配一个最多十位数字的电话号码，其中：
- `^` 表示字符串的开始。
- `(\d{0,3})` 表示一个至多三位数字的组。
- `(\d{0,3})` 表示另一个至多三位数字的组。
- `(\d{0,4})` 表示一个至多四位数字的组。
- `$` 表示字符串的结尾。
- 如果 `value` 符合正则表达式的格式，则使用 `match` 方法将其分成三个组，并返回格式为 `(xxx) xxx-xxxx` 的电话号码。
- 如果 `value` 不符合正则表达式的格式，则将其保存在 `formattedPhone` 变量中。
- `onPhoneInput` 函数接受一个 `InputEvent` 参数 `event`，将输入框的值 `value` 替换为仅包含数字的字符串，并将其保存在 `phone` 变量中。
- `watch` 函数监听 `phone` 变量的变化，并在变化时调用 `formatPhone` 函数来格式化电话号码。
- 最后，在模板中使用 `v-model` 指令将 `formattedPhone` 绑定到输入框上，并使用 `@input` 事件监听输入框的输入。