Vue中能否操控v-mask？预填手机号首六位脱敏兼容问题

核心思路 #

分开存储原始手机号和输入框显示值，通过输入框的焦点事件切换显示状态：页面加载时展示掩码格式，用户编辑时切换为v-mask支持的数字格式化格式，同时兼顾显示需求与v-mask的功能兼容性。

具体实现步骤 #

1. 新增数据字段
   在组件data中添加两个字段，分别存储原始号码和输入框绑定的显示值：

data() {
  return {
    mask: ['###-###-####'],
    numberAndCaptcha: {
      // 不再直接绑定该字段到输入框
    },
    rawPhoneNumber: '', // 存储后端返回的原始手机号
    displayPhoneNumber: '' // 输入框v-model绑定的字段
  }
}

2. 页面加载时处理预填逻辑
   后端返回手机号后，先保存原始号码，再生成掩码显示值：

// 假设后端返回的号码为res.phoneNumber
this.rawPhoneNumber = res.phoneNumber;
// 生成前六位掩码的显示格式
this.displayPhoneNumber = '******' + this.rawPhoneNumber.slice(-4);

3. 修改输入框绑定与事件监听
   调整输入框的v-model绑定，新增焦点相关事件：

<input 
  type="text" 
  placeholder="Phone Number" 
  id="phoneNumber" 
  class="form-control"  
  v-model="displayPhoneNumber" 
  @keyup="onNumberChange" 
  v-mask="mask"
  @focus="onPhoneFocus"
  @blur="onPhoneBlur"
/>

4. 实现焦点切换逻辑
   添加onPhoneFocus和onPhoneBlur方法，处理显示状态切换：

methods: {
  onPhoneFocus() {
    // 聚焦时，将显示值切换为原始号码的格式化版本，适配v-mask规则
    if (this.rawPhoneNumber) {
      const formatted = this.rawPhoneNumber.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
      this.displayPhoneNumber = formatted;
    }
  },
  onPhoneBlur() {
    // 失去焦点时，判断号码是否修改，决定显示掩码还是更新原始号码
    const pureNumber = this.displayPhoneNumber.replace(/-/g, '');
    if (pureNumber === this.rawPhoneNumber) {
      // 号码未修改，恢复掩码显示
      this.displayPhoneNumber = '******' + this.rawPhoneNumber.slice(-4);
    } else {
      // 号码已修改，更新原始号码存储
      this.rawPhoneNumber = pureNumber;
      // 此处可添加调用接口保存新号码的逻辑
    }
  },
  onNumberChange() {
    // 保留原有keyup逻辑（如长度验证等）
  }
}

注意事项 #

• 确保后端返回的手机号为10位纯数字（与当前掩码格式匹配），若号码长度不同，需调整slice截取位置和格式化正则。
• 若用户编辑时清空输入框，可根据业务需求在失去焦点后显示占位符或其他默认状态。

内容的提问来源于stack exchange，提问作者Adarsh