Vue国际区号组件开发（目前已经发布到npm）

安装命令

npm install vue-country-code-selector

中国的国际区号是86，所以组件默认值是86，当然也可以根据需求，填写相应国家的国际区号。

1、组件支持国家的中文名字或者英文名字的模糊搜索；
2、点击下拉框中的某一项即可实现切换。（并且可以实现code值的子传父）；
3、下拉框展示会自动定位（平滑滚动）到当前选中位置；

组件效果如下：

组件的使用方式如下

<template>
  <div class="tel-container">
    <country-code-selector :countryCode.sync="value"></country-code-selector>
    <input type="text" v-model="value">
    <p>这是国际区号{{value}}</p>
  </div>
</template>

<script>
  import countryCodeSelector from 'vue-country-code-selector'
  export default {
    name: 'VueTelInput',
    components: {
      countryCodeSelector
    },
    data () {
      return {
        // 这里是对应国家的国际区号，这里是必填项，例如中国是86
        value: 86
      }
    }
  }
</script>

<style scoped>
  .tel-container{
    display: flex;
    align-items: center;
  }
  input {
    height: 20px;
  }
  p {
    margin-left: 20px;
  }
</style>