引用插件:餓了么的mint-ui組件中的picker功能,具體API可參照官網說明:http://mint-ui.github.io/docs/#/zh-cn2/picker
背景:項目需要做一個省份-城市-地區(qū)的選擇級聯效果,我從gayhub上找了一下,決定使用mint-ui的組件,因為各個功能都很全而且設計跟我們的項目風格類似。
具體實現:
通過閱讀官網的實例,大概就能知道這個組件的用法:
在vue中寫入組件:<mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
我們可以看到,這個組件中傳入的數據slots和當其改變是觸發(fā)的事件: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來進行省份、城市、地區(qū)的選擇時,發(fā)現最大的問題是搞不到符合該插件數據格式的數據,于是從百度上扒了一份省份、城市、地區(qū)數據之后寫了一個函數對其進行了處理,在這里,共享給大家:
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] },
三組數據以及三個方法如上,當對省份進行選擇時,動態(tài)匹配相應的城市,同理對城市進行選擇時動態(tài)匹配相應的地區(qū),如此就可以實現三級聯動的效果了
以上這篇使用mint-ui實現省市區(qū)三級聯動效果的示例代碼就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com