1. vue-country-data-select
✨ A selector for country data, such as selecting a calling code
vue-country-data-select
Package: vue-country-data-select
Last modified: Mon, 23 May 2022 13:46:28 GMT
Version: 1.1.1
License: MIT
Downloads: 6

Install

npm install vue-country-data-select
yarn add 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

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin