快捷導(dǎo)航

使用mint-ui實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)效果的示例代碼

更新時(shí)間：2018年02月09日 10:28:43 作者：chaiyanchen

下面小編就為大家分享一篇使用mint-ui實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)效果的示例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

引用插件：餓了么的mint-ui組件中的picker功能，具體API可參照官網(wǎng)說明：http://mint-ui.github.io/docs/#/zh-cn2/picker

背景：項(xiàng)目需要做一個(gè)省份-城市-地區(qū)的選擇級(jí)聯(lián)效果，我從gayhub上找了一下，決定使用mint-ui的組件，因?yàn)楦鱾€(gè)功能都很全而且設(shè)計(jì)跟我們的項(xiàng)目風(fēng)格類似。

具體實(shí)現(xiàn)：

通過閱讀官網(wǎng)的實(shí)例，大概就能知道這個(gè)組件的用法：

在vue中寫入組件：<mt-picker :slots="slots" @change="onValuesChange"></mt-picker>

我們可以看到，這個(gè)組件中傳入的數(shù)據(jù)slots和當(dāng)其改變是觸發(fā)的事件：onValuesChange()，所以只要在使用該組件的父組件內(nèi)注冊(cè)slots和onValuesChange就可以實(shí)現(xiàn)了

以下是官網(wǎng)上的實(shí)例：

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'
 }
 ]
 };
 }
};

在實(shí)際操作中當(dāng)我想使用picker來進(jìn)行省份、城市、地區(qū)的選擇時(shí)，發(fā)現(xiàn)最大的問題是搞不到符合該插件數(shù)據(jù)格式的數(shù)據(jù)，于是從百度上扒了一份省份、城市、地區(qū)數(shù)據(jù)之后寫了一個(gè)函數(shù)對(duì)其進(jìn)行了處理，在這里，共享給大家：

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]
  },

三組數(shù)據(jù)以及三個(gè)方法如上，當(dāng)對(duì)省份進(jìn)行選擇時(shí)，動(dòng)態(tài)匹配相應(yīng)的城市，同理對(duì)城市進(jìn)行選擇時(shí)動(dòng)態(tài)匹配相應(yīng)的地區(qū)，如此就可以實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)的效果了

以上這篇使用mint-ui實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)效果的示例代碼就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: