脚本宝典收集整理的这篇文章主要介绍了

vue城市选择组件

脚本宝典小编觉得挺不错的，现在分享给大家，也给大家做个参考,希望能帮助你少写一行代码，多一份安全和惬意。

preview.png

适用于vue的城市选择组件

仓库地址

基本功能：

  1. 支持全选、反选以及全部清空。
  2. 支持按拼音筛选。
  3. 勾选省份将会勾选省份下所有城市。
  4. 返回数据可灵活处理。

安装

npm install cn-region-picker
# 或者
yarn add cn-region-picker

用法

组件引入：

// import包
import CnRegionPicker from 'cn-region-picker'

// use
Vue.use(CnRegionPicker)

使用：

<cn-region-picker
  v-model="pickCity"
  placeholder="城市"
>
</cn-region-picker>

<!-- 省略代码 -->
data () {
  return {
    pickCity: []
  }
}

选择返回的数据：

[{
  "cityIndex": 37,
  "id": "210200",
  "name": "大连市",
  "pinYin": "dalian",
  "shortName": "大连"
}, {
  "cityIndex": 41,
  "id": "210600",
  "name": "丹东市",
  "pinYin": "dadong",
  "shortName": "丹东"
}]

属性

参数 说明 类型 默认值
placeholder 不说明 String 选择城市

本地运行

npm install
npm run dev

总结

以上是脚本宝典为你收集整理的

vue城市选择组件

全部内容，希望文章能够帮你解决

vue城市选择组件

所遇到的程序开发问题，欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

80%的人都看过