引用插件:饿了么的mint-ui组件中的picker功能,具体API可参照官网说明:http://mint-ui.github.io/docs/#/zh-cn2/picker
背景:项目需要做一个省份-城市-地区的选择级联效果,我从gayhub上找了一下,决定使用mint-ui的组件,因为各个功能都很全而且设计跟我们的项目风格类似。
具体实现:
通过阅读官网的实例,大概就能知道这个组件的用法:
在vue中写入组件:<mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
我们可以看到,这个组件中传入的数据slots和当其改变是触发的事件:onValuesChange(),所以只要在使用该组件的父组件内注册slots和onValuesChange就可以实现了
以下是官网上的实例:
export default { methods: { onValuesChange(picker, values) { if (values[0] > values[1]) { picker.setSlotValue(1, values[0]); } } }, data() { return { slots: [ { flex: 1, values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'], className: 'slot1', textAlign: 'right' }, { divider: true, content: '-', className: 'slot2' }, { flex: 1, values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'], className: 'slot3', textAlign: 'left' } ] }; } };
在实际操作中当我想使用picker来进行省份、城市、地区的选择时,发现最大的问题是搞不到符合该插件数据格式的数据,于是从百度上扒了一份省份、城市、地区数据之后写了一个函数对其进行了处理,在这里,共享给大家:
onProvinceChange(picker, values) { this.province = picker.getValues()[0] var cityArr = []; for(var key in provinceCity[this.province]) { cityArr.push(key); } this.slots2[0].values = cityArr; }, onCityChange(picker, values) { this.city = picker.getValues()[0] var countyArr = []; for(var key in provinceCity[this.province][this.city]) { countyArr.push(key); } this.slots3[0].values = countyArr; }, onCountyChange(picker, values) { this.county = picker.getValues()[0] },
三组数据以及三个方法如上,当对省份进行选择时,动态匹配相应的城市,同理对城市进行选择时动态匹配相应的地区,如此就可以实现三级联动的效果了
以上这篇使用mint-ui实现省市区三级联动效果的示例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月25日
2024年09月25日
- 纯音入心系列纯音乐《天籁古筝》1CD[MP3][331MB]
- 男女对唱典藏天碟《发烧对唱·那个季节里的歌DSD》10CD[WAV]
- 群星2010-歌林精选辑[歌林][WAV+CUE]
- TrioZimbalist-PianoTriosofWeinberg,Auerbach,Dvorak(2024)[24-44,1]wav
- 群星.1992-滚石第一流台湾歌·12王牌大车拼【滚石】【WAV+CUE】
- 林子祥.1984-创作歌集【华纳】【WAV+CUE】
- 周汤豪.2010-周汤豪【华纳】【FLAC分轨】
- Mozart-TheStringQuintets-AmadeusQuartet,CecilAronowitz(2017)[24-44,1][WAV+CUE]
- JamesWilliamsDennisIrwin-Focus(2024,Red)[24-48]FLAC
- 藤泽麻衣《空みあげて》[WAV]
- 纯音入心系列纯音乐《中国古筝经典名曲》1CD[MP3][1.3GB]
- 纯音入心系列纯音乐《古筝新奏:岁月静好与筝语,细水流年与筝同》1CD[MP3][846.9MB]
- 670《脆弱敏感小女生》[320K/MP3][27.53MB]
- 曾琳.2011-好好爱我【南方】【WAV+CUE】
- 范晓萱.1995-RAIN【福茂】【WAV+CUE】