如何在vue tel输入上添加搜索国家/地区代码？

Question

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

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

我想要这样显示搜索：

因此，使用户更容易选择国家/地区代码

我该怎么办？

Answer 1

我认为最简单的方法是并排放置两个下拉菜单，因此看起来就像您发布的下拉菜单一样。当用户单击“保存”时，将带国家代码的v模型和带编号的v模型连接起来。

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