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

好的，您可以这样实现：

1. 在 Vue3 中使用 v-model 绑定一个 data 中的变量，例如：`<input type="tel" v-model="phoneNumber">`
2. 在 data 中定义 phoneNumber 变量，并在 methods 中定义一个格式化电话号码的方法，例如：

data() {
  return {
    phoneNumber: ''
  }
},
methods: {
  formatPhoneNumber() {
    // 去除空格和非数字字符
    let phone = this.phoneNumber.replace(/\D/g, '');
    // 根据长度进行格式化
    if (phone.length >= 1 && phone.length <= 3) {
      phone = '(' + phone;
    } else if (phone.length > 3 && phone.length <= 6) {
      phone = '(' + phone.slice(0, 3) + ') ' + phone.slice(3);
    } else if (phone.length > 6 && phone.length <= 10) {
      phone = '(' + phone.slice(0, 3) + ') ' + phone.slice(3, 6) + '-' + phone.slice(6);
    } else if (phone.length > 10) {
      phone = '(' + phone.slice(0, 3) + ') ' + phone.slice(3, 6) + '-' + phone.slice(6, 10);
    }
    // 将格式化后的字符串赋值给 phoneNumber
    this.phoneNumber = phone;
  }
}

3. 在 input 标签中添加 @input 事件监听，调用 formatPhoneNumber 方法，例如：`<input type="tel" v-model="phoneNumber" @input="formatPhoneNumber">`
4. 在 input 标签中添加 maxlength 属性限制输入长度，例如：`<input type="tel" v-model="phoneNumber" @input="formatPhoneNumber" maxlength="14">`
5. 最后，您可以使用退回键删除输入框中的内容。