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>