脚本宝典收集整理的这篇文章主要介绍了vue城市选择组件
脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
适用于vue的城市选择组件
基本功能:
- 支持全选、反选以及全部清空。
- 支持按拼音筛选。
- 勾选省份将会勾选省份下所有城市。
- 返回数据可灵活处理。
安装
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,请注明来意。