如何在 vue tel 输入中获取国家/地区代码？

Posted 2023-02-22

【中文标题】如何在 vue tel 输入中获取国家/地区代码？

【英文标题】：How can I get country code on vue tel input?

【发布时间】：2020-03-06 08:05:28

【问题描述】：

我的组件

<v-form>
  <v-container>
    <v-row>        
      <v-col cols="12" sm="6" md="3">
        <vue-tel-input v-model="phone"></vue-tel-input>
      </v-col>
    </v-row>
  </v-container>
  <v-btn
    color="success"
    @click="submit"
  >
    submit
  </v-btn>
</v-form>

当我点击提交时，我会收到电话。我怎样才能获得国家代码？

[参考]https://www.npmjs.com/package/vue-tel-input-vuetify

[Codepen]https://codepen.io/positivethinking639/pen/YzzjzWK?&editable=true&editors=101

【参考方案1】：

似乎vue-tel-input 提供了一个country-changed 事件。根据文档，它甚至是第一次被触发并返回一个对象：

Object 
   areaCodes: null,
   dialCode: "31",
   iso2: "NL",
   name: "Netherlands (Nederland)",
   priority: 0

因此，可以将此事件处理程序添加到组件中，并且可以将国家代码存储在组件中，就像您已经为电话值所做的那样。

html 部分

<div id="app">
  <v-app id="inspire">
    <v-form>
      <v-container>
        <v-row>        
          <v-col cols="12" sm="6" md="3">
            <vue-tel-input v-model="phone" v-on:country-changed="countryChanged"></vue-tel-input>
          </v-col>
        </v-row>
      </v-container>
      <v-btn
        color="success"
        @click="submit"
      >
        submit
      </v-btn>
    </v-form>
  </v-app>
</div>

JS部分

new Vue(
  el: '#app',
  vuetify: new Vuetify(),
  data() 
    return 
      phone: null,
      country: null
    
  ,
  methods: 
    countryChanged(country) 
      this.country = country.dialCode
    ,
    submit() 
      console.log(this.phone);
      console.log(this.country);
    
  
);

在这里您可以看到一个工作版本： https://codepen.io/otuzel/pen/PooBoQW?editors=1011

注意：我不是每天都使用 Vue，所以我不确定这是否是通过事件处理程序修改数据的最佳做法。

【讨论】：

我更新了我的答案。例如，它为荷兰返回“31”。希望对你有用。

为什么没有+ 符号？比如我选择美国，国家代码：1。应该+1

@positivethinking 显然该组件使用此列表来获取国家代码：github.com/jackocnr/intl-tel-input/blob/master/src/js/data.js 如果没有加号，使用此数据应该更灵活。因此，您可以在countryChanged 事件处理程序中将“+”字符添加到县代码中，例如this.country = '+' + country.dialCode。

太棒了。非常感谢

嗨。我想再问一次:) 你知道如何在国家代码下拉列表中添加国家代码搜索吗？所以让用户更容易

【参考方案2】：

<vue-tel-input v-model="phone" v-bind="bindProps"></vue-tel-input>

data() 
  return 
    phone: null,
    bindProps:
      mode: 'international'
    
  

在vue-tel-input@3.1.1 中可以通过设置prop mode: 'international' 来实现，在这种情况下，电话号码将始终转换为+123 123 123...

【讨论】：

我签入了我的 package.json。我的版本是"vue-tel-input": "^4.0.0"。它应该有效吗