时间戳

首页 > 解决方案 > 如何在 vue tel 输入中添加搜索国家代码？

vue.js - 如何在 vue tel 输入中添加搜索国家代码？

问题描述

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

我想要这样的显示搜索：

在此处输入图像描述

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

我该怎么做？

标签： vue.jsvuejs2vue-componentvuetify.js

解决方案

我认为最简单的方法是并排放置两个下拉菜单，因此它看起来就像您发布的那样。当用户点击“保存”时，有国家代码的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

推荐阅读