码迷,mamicode.com
首页 > 其他好文 > 详细

vue城市选择组件

时间:2018-12-14 22:51:07      阅读:294      评论:0      收藏:0      [点我收藏+]

标签:ado   仓库   dad   省份   大连   返回   turn   默认   ima   

技术分享图片

适用于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)

使用:

  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

原文地址:https://segmentfault.com/a/1190000017269825

vue城市选择组件

标签:ado   仓库   dad   省份   大连   返回   turn   默认   ima   

原文地址:https://www.cnblogs.com/datiangou/p/10121734.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!