• <fieldset id="8imwq"><menu id="8imwq"></menu></fieldset>
  • <bdo id="8imwq"><input id="8imwq"></input></bdo>
    最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
    問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
    當前位置: 首頁 - 科技 - 知識百科 - 正文

    使用mint-ui實現省市區(qū)三級聯動效果的示例代碼

    來源:懂視網 責編:小采 時間:2020-11-27 22:19:50
    文檔

    使用mint-ui實現省市區(qū)三級聯動效果的示例代碼

    使用mint-ui實現省市區(qū)三級聯動效果的示例代碼:引用插件:餓了么的mint-ui組件中的picker功能,具體API可參照官網說明:http://mint-ui.github.io/docs/#/zh-cn2/picker 背景:項目需要做一個省份-城市-地區(qū)的選擇級聯效果,我從gayhub上找了一下,決定使用mint-ui的組件,因為各個功能都很全而且
    推薦度:
    導讀使用mint-ui實現省市區(qū)三級聯動效果的示例代碼:引用插件:餓了么的mint-ui組件中的picker功能,具體API可參照官網說明:http://mint-ui.github.io/docs/#/zh-cn2/picker 背景:項目需要做一個省份-城市-地區(qū)的選擇級聯效果,我從gayhub上找了一下,決定使用mint-ui的組件,因為各個功能都很全而且

    引用插件:餓了么的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

    文檔

    使用mint-ui實現省市區(qū)三級聯動效果的示例代碼

    使用mint-ui實現省市區(qū)三級聯動效果的示例代碼:引用插件:餓了么的mint-ui組件中的picker功能,具體API可參照官網說明:http://mint-ui.github.io/docs/#/zh-cn2/picker 背景:項目需要做一個省份-城市-地區(qū)的選擇級聯效果,我從gayhub上找了一下,決定使用mint-ui的組件,因為各個功能都很全而且
    推薦度:
    • 熱門焦點

    最新推薦

    猜你喜歡

    熱門推薦

    專題
    Top
    主站蜘蛛池模板: 无码精品人妻一区二区三区免费看 | 国产精品亚洲аv无码播放| 99re只有精品8中文| 精品国产福利一区二区| 日韩经典精品无码一区| 国产精品美女久久久久av爽 | 久久香综合精品久久伊人| 久久夜色精品国产www| 91精品国产自产在线观看| 97久久久精品综合88久久| 亚洲精品国产成人片| 精品亚洲一区二区三区在线观看 | 亚洲av午夜福利精品一区| 久久99国产精品成人欧美| 国产观看精品一区二区三区| 欧美亚洲精品在线| 精品国产自在在线在线观看| 国产成人vr精品a视频| 久久精品水蜜桃av综合天堂| 亚洲精品国产美女久久久| 在线观看自拍少妇精品| 欧美精品VIDEOSEX极品| 精品欧美一区二区三区久久久| 精品人妻人人做人人爽| 国产精品成人观看视频| 国产精品麻豆高清在线观看| 精品卡一卡二卡乱码高清| 青青青国产精品一区二区| 亚洲午夜国产精品无码老牛影视| 亚洲精品无码专区在线播放| 婷婷国产成人精品一区二| 免费人成在线观看欧美精品| 久久久WWW成人免费精品| 国产亚洲美女精品久久久| 国产一区二区精品久久岳| 久久99热这里只有精品国产| 久久996热精品xxxx| 无码国内精品久久人妻麻豆按摩 | 国产香蕉国产精品偷在线| 国产精品无码免费专区午夜| 99久久精品费精品国产 |