1. vue-country-data-select

vue-country-data-select

vue-country-data-select

✨ A selector for country data, such as selecting a calling code

效果预览

demo.gif

下拉选项会根据输入进行筛选,匹配 电话区号地区官方英文名称地区英文简称

数据包含大部分国家和某些国家的部分地区,如 Hong Kong

安装方式

 npm install vue-country-data-select --save
 import vueCountryDataSelect from 'vue-country-data-select'

Vue.use(vueCountryDataSelect)

使用方法

 <vueCountryDataSelect v-model="input" width="300" height="30"></vueCountryDataSelect>
  • 无论有无输入,在点击三角形出现下拉列表时,必为完整的列表,但只要改变输入,数据会自动筛选
  • 支持 v-model 语法糖
  • widthheight 必填
  • 选填项 mode 可切换至输出地区电话区号模式,以后会继续添加功能
  • placeholder: 输入提示信息
 <vueCountryDataSelect
  v-model="input" width="200" height="30" mode="countryCallingCodes">
</vueCountryDataSelect>

数据来源

country-data