VUE3+TS+VITE 将input输入的内容格式化将其格式化为 (xxx) xxx-xxxx 的电话号码并限制输入长度，并且可以删除里面的内容

好的，以下是一个示例代码，使用 Vue3 + TypeScript + Vite 实现将输入的内容格式化为电话号码，并且可以删除里面的内容：

<template>
  <div>
    <label for="phone-input">Phone Number:</label>
    <input id="phone-input" type="tel" v-model="phone" @input="handleInput" :maxlength="14" />
  </div>
</template>

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

export default defineComponent({
  name: 'PhoneInput',
  setup() {
    const phone = ref('');

    const handleInput = (event: InputEvent) => {
      const input = (event.target as HTMLInputElement).value.replace(/\D/g, '').substring(0, 10); // 只保留数字，限制长度为10
      const formattedInput = input.replace(/^(\d{3})(\d{0,3})(\d{0,4}).*/, '($1) $2-$3'); // 格式化为 (xxx) xxx-xxxx
      phone.value = formattedInput;
    };

    const handleDelete = () => {
      phone.value = '';
    };

    return {
      phone,
      handleInput,
      handleDelete,
    };
  },
});
</script>

在上面的代码中，我们添加了一个名为 `handleDelete` 的函数，用于清空输入框的内容。在模板中，我们可以添加一个删除按钮，通过调用 `handleDelete` 函数来清空输入框的内容。例如：

<template>
  <div>
    <label for="phone-input">Phone Number:</label>
    <input id="phone-input" type="tel" v-model="phone" @input="handleInput" :maxlength="14" />
    <button @click="handleDelete">Clear</button>
  </div>
</template>

希望这个回答能够帮助你解决问题！