如何在 vue tel 输入中添加搜索国家代码？答案

【问题标题】：How can I add search country code on vue tel input?如何在 vue tel 输入中添加搜索国家代码？
【发布时间】：2020-03-06 12:45:58
【问题描述】：

我的 vue 组件：

      <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>

我的密码笔：https://codepen.io/positivethinking639/pen/XWWBXMW?editors=1011

我想像这样显示搜索：

让用户更容易选择国家代码

我该怎么做？

【问题讨论】：

我们不能直接对现有的 v-tel-input 使用搜索，没有提供将搜索框附加到国家/地区结果的插槽。尽管如此，如果你想实现，你可以搜索一些公共 api 来获取国家代码、名称和标志，使用 vuetify 选择组件自定义你的 UI

标签： vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

我认为最简单的方法是并排放置两个下拉菜单，这样看起来就像您发布的那样。当用户点击“保存”时，将带有国家代码的v-model和带有数字的v-model加入。

data () => ({
     countryCode: '+81',
     number: '555-5555'
}),
methods: {
     submitForm () {
          const phone = countryCode + number //or however you want to concatenate
          //do other stuff here
     }
}

您的其他选择是将国家代码拼接并添加到更改电话号码之前的字符串中，但这对于简单的解决方案来说似乎有点矫枉过正。

如果我不理解您的问题，请添加更多细节。

如果您特别希望显示数字，则必须更改您正在使用的库选项。看来您使用的是vue-tel-input 包，对吧？

您可以设置 + 代码以显示：

inputOptions: {
          showDialCode: true
        }

在此处查看所有选项： https://www.npmjs.com/package/vue-tel-input

【讨论】：

这不是我的本意。仔细看图片。我希望能够搜索国家/地区
该库中没有本机支持。您必须自己添加它，但您可以使用一系列选项和一个简单的 v-model 输入文本框来添加它。然后@change，您可以使用给定的输入过滤选项数组。
这似乎很难，而且需要很多时间。是否有其他软件包提供此功能？