首頁 > web前端 > js教程 > 使用mint-ui實現省市區三級連動效果

使用mint-ui實現省市區三級連動效果

亚连
發布: 2018-06-06 15:51:48
原創
2132 人瀏覽過

下面我就為大家分享一篇使用mint-ui實現省市區三級連動效果的範例程式碼,具有很好的參考價值,希望對大家有所幫助。

引用外掛程式:餓了麼的mint-ui元件中的picker功能,具體API可參考官網說明:http://mint-ui.github.io/docs/#/zh-cn2/picker

背景:專案需要做一個省份-城市-地區的選擇級聯效果,我從gayhub上找了一下,決定使用mint-ui的組件,因為各個功能都很全而且設計跟我們的項目風格類似。

具體實作:

透過閱讀官網的實例,大概就能知道這個元件的用法:

#在vue中寫入元件:

#我們可以看到,這個元件中傳入的資料slots和當其改變是觸發的事件:onValuesChange(),所以只要在使用該組件的父組件內註冊slots和onValuesChange就可以實現了

#以下是官網上的實例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

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'

 }, {

  pider: true,

  content: '-',

  className: 'slot2'

 }, {

  flex: 1,

  values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],

  className: 'slot3',

  textAlign: 'left'

 }

 ]

 };

 }

};

登入後複製

在實際操作中當我想使用picker來進行省份、城市、地區的選擇時,發現最大的問題是搞不到符合該插件數據格式的數據,於是從百度上扒了一份省份、城市、地區數據之後寫了一個函數對其進行了處理,在這裡,共享給大家:

##

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

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]

  },

登入後複製
三組數據以及三個方法如上,當對省份進行選擇時,動態匹配相應的城市,同理對城市進行選擇時動態匹配相應的地區,如此就可以實現三級聯動的效果了

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

使用vue2.0.js實作多級連動選擇器

透過JavaScript實作比較同一天的時間大小

在React、Vue專案中如何使用SVG#

以上是使用mint-ui實現省市區三級連動效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板