如何在 vue tel 输入中添加搜索国家/地区代码? [英] How can I add search country code on vue tel input?

问题描述

我的 vue 组件:

 <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-容器><v-btn颜色=成功"@click="提交">提交</v-btn>

我的代码笔:

方便用户选择国家代码

我该怎么做?

解决方案

我认为最简单的方法是将两个下拉列表并排放置，因此看起来就像您发布的那个.当用户点击保存"时，将带有国家代码的 v-model 和带有编号的 v-model 连接起来.

data() =>({国家代码:'+81'，编号:'555-5555'}),方法: {提交表格 () {const phone = countryCode + number//或者你想连接//在这里做其他事情}}

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

如果我不明白你的问题，请补充一点细节.

如果您特别希望显示数字，则必须对正在使用的库选项进行更改.看来您正在使用 vue-tel-input 包，对吗?

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

inputOptions: {显示拨号代码:真}

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

My vue component :

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

My codepen : https://codepen.io/positivethinking639/pen/XWWBXMW?editors=1011

I want display search like this :

So make it easier for users to choose the country code

How can I do it?

解决方案

I think the simplest is to have two drop-downs side-by-side, so it looks just like the one you posted. When the user clicks "Save", have the v-model with the country code and the v-model with the number joined.

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

Your other options are to splice and add the country code to the string ahead of the phone number on change, but that seems a little overkill for something with a simple solution.

If I'm not understanding your question, please add a little more detail.

If you specifically want the numbers to show, then you'll have to make changes to the library options you're using. It seems you're using vue-tel-input package, right?

You can set the + code to show with this:

inputOptions: {
          showDialCode: true
        }

Check out all the options here: https://www.npmjs.com/package/vue-tel-input

这篇关于如何在 vue tel 输入中添加搜索国家/地区代码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！