使用Maz-UI手机号输入组件时印度号码自动前置0问题求助

问题描述 #

我在Vue.js项目中使用Maz-UI的手机号输入组件，选择印度手机号格式后，输入任意10位数字，组件未显示预期的格式化号码（如98765-43210），反而自动在输入内容前添加了一个0（实际显示为09876543210）。

排查与解决方法 #

• 确认区域代码配置
  确保组件明确设置了印度的区域代码IN，避免因默认规则 fallback 导致的格式错误：

  <MazPhoneNumberInput
    country-code="IN"
    v-model="phoneNumber"
  />
  

• 自定义格式化规则
  如果组件支持自定义格式化逻辑，可以手动覆盖印度手机号的格式，强制使用符合预期的样式：

  // 自定义印度手机号格式化函数
  const formatIndianPhone = (rawNumber) => {
    const digitsOnly = rawNumber.replace(/\D/g, '');
    if (digitsOnly.length === 10) {
      return `${digitsOnly.slice(0, 5)}-${digitsOnly.slice(5)}`;
    }
    return digitsOnly;
  };
  

  将此函数绑定到组件的格式化属性（具体参考组件文档，如format或custom-format）。

• 检查组件版本与官方Issue
  该问题可能是组件的已知Bug，前往Maz-UI的官方仓库搜索相关Issue，确认是否已有修复版本或临时解决方案。

• 调整底层依赖配置
  Maz-UI的手机号组件通常依赖libphonenumber-js，若组件允许自定义依赖配置，可以修改该库的印度区域规则，禁用自动添加前置0的逻辑。

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