MazPhoneNumberInput默认国家属性无法识别电话号码中的国家码

你设置MazPhoneNumberInput默认国家为加拿大（CA）后，后端返回的号码+15062345678会完整显示在输入框里（带+1前缀），组件没自动识别并隐藏国家码。试试这几个解决办法：

• 开启自动识别：给组件加上auto-detect-country属性，让组件自动解析号码里的国家码并匹配对应国家，输入框就会只显示本地号码部分：

  <MazPhoneNumberInput
    :model-value="phone"
    show-code-on-list
    color="info"
    :preferred-countries="['FR', 'BE', 'DE', 'US', 'GB']"
    :ignored-countries="['AC']"
    default-country-code="CA"
    auto-detect-country
    @input="v$.phone.$touch"
    @update="validPhoneNumber = $event"
  />
  

• 提前解析号码：如果自动识别没起效，用组件依赖的libphonenumber-js提前处理后端返回的号码，提取纯本地号码再传给组件：
  先安装依赖：

  npm install libphonenumber-js
  

  然后在组件里处理：

  <script setup>
  import { parsePhoneNumber } from 'libphonenumber-js'
  import { ref, onMounted } from 'vue'
  
  const phone = ref('+15062345678')
  const localPhone = ref('')
  
  const parsePhone = () => {
    const parsedNum = parsePhoneNumber(phone.value)
    if (parsedNum) {
      localPhone.value = parsedNum.nationalNumber
    }
  }
  
  onMounted(() => {
    parsePhone()
  })
  </script>
  
  <template>
    <MazPhoneNumberInput
      :model-value="localPhone"
      show-code-on-list
      color="info"
      :preferred-countries="['FR', 'BE', 'DE', 'US', 'GB']"
      :ignored-countries="['AC']"
      default-country-code="CA"
      @input="v$.phone.$touch"
      @update="validPhoneNumber = $event"
    />
  </template>
  

• 更新组件版本：如果用的是旧版maz-ui，可能存在自动识别的bug，执行更新命令试试：

  npm update maz-ui
  

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