我之前在项目里用vue-tel-input时也碰到过一模一样的问题——切换national/international模式根本没法彻底去掉那些国家码前缀，不管是输入框显示还是回调里的数值都带着多余的+91或者0。后来摸索出几个靠谱的解决办法，分享给你：

1. 自定义格式化函数，完全控制输入框显示内容 #

组件默认的格式化逻辑不管哪种模式都会带上前缀，所以我们可以自己写一个格式化函数，只保留纯手机号部分：

首先在组件上绑定formatting-fn属性：

<vue-tel-input
  v-model="mobile"
  :formatting-fn="customPhoneFormat"
  @input="onInput"
></vue-tel-input>

然后在你的Vue组件方法里定义这个自定义格式化函数：

customPhoneFormat({ number, country }) {
  // 先把国家码的+号去掉，方便后续匹配
  const cleanDialCode = country.dialCode.replace('+', '');
  // 从significant字段中移除开头的国家码和可能的0前缀
  let pureMobile = number.significant.replace(new RegExp(`^${cleanDialCode}|^0`), '');
  // 返回纯手机号，这样输入框就只会显示不带前缀的内容了
  return pureMobile;
}

2. 优化输入回调，确保拿到的是纯手机号 #

即使输入框显示处理好了，回调里也要再做一遍校验处理，避免因为组件内部逻辑导致前缀残留：

onInput({ number, isValid, country }) {
  const cleanDialCode = country.dialCode.replace('+', '');
  // 彻底移除国家码和开头的0前缀
  this.mobile = number.significant.replace(new RegExp(`^${cleanDialCode}|^0`), '');
  this.country_code = country.dialCode;
}

3. 禁用组件自动格式化，避免冲突 #

如果发现组件还是会自动加前缀，可以加上auto-format="false"属性，完全接管格式化逻辑：

<vue-tel-input
  v-model="mobile"
  auto-format="false"
  :formatting-fn="customPhoneFormat"
  @input="onInput"
></vue-tel-input>

补充说明 #

为什么切换模式没用？因为national模式是按照目标国家的本地格式显示（比如印度手机号会自动加0前缀），international模式则会带+国家码，这两种都不符合你要彻底移除前缀的需求，所以必须用自定义格式化来覆盖默认逻辑。

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