公司上一期項目中新增了省市區滑動三級聯動效果,用的是mint-ui的picker組件和popup組件,效果如下:點擊確定換地區,點擊取消不變 省市區數據是后台給的(根據上一級的id,獲取下一級數據列表,省列表傳0),數據格式如下 接下來就直接上代碼了 引入組件后的html部分 ...
demo及源碼地址https: github.com artiely citypicker 先去下載一個 省份 城市 區縣 鄉鎮 四級聯動數據,然后 引入 組件使用 組件方法 let index shi.indexOf values let xian s values shi index 完成效果 demo及源碼地址https: github.com artiely citypicker ...
2017-06-25 11:30 55 17241 推薦指數:
公司上一期項目中新增了省市區滑動三級聯動效果,用的是mint-ui的picker組件和popup組件,效果如下:點擊確定換地區,點擊取消不變 省市區數據是后台給的(根據上一級的id,獲取下一級數據列表,省列表傳0),數據格式如下 接下來就直接上代碼了 引入組件后的html部分 ...
一、通過vue mint-ui 最終實現的效果 二、省市區對應的數據格式 三、通過vue、mint 實現組件 四、選擇對應的省市區實現的業務邏輯 五、部分css樣式 ...
三級聯動,隨着越來越多的審美,出現了很多種,好多公司都仿着淘寶的三級聯動 ,好看時尚,so我們公司也一樣……為了貼代碼方便,我把寫在data里面省市區的json獨立了出來,下載貼進去即可用,鏈接如下 首先頁面顯示如下: 然后我們縣級所在地區會出現三級聯動,如下:(以下是片段,背景色未 ...
工作中需要一個盒京東購物車地址選擇相似的一個省市區三級聯動選擇組件,google查了下都是下拉框形式的,於是自己寫了一個,希望對使用vue開發項目的朋友有幫助,顯示效果如下:使用vue2.0開發 html代碼如下 script: 樣式代碼請自己挑選下: ...
該栗子是我直接從公司的項目單獨拉出來的(懶得重新寫一次了),所以代碼會有些冗余,下面直接看效果: 接着上代碼: html: script: style: PS:那個地址的JS文件由於太大我就不貼出來了,大家可以去我的github那里下載完整 ...
我們在上一篇中介紹了如何獲取省市區的數據,現在我們來介紹使用spinner控件來實現省市區3級聯動的例子。 下面的代碼是我在開發項目時實現的。 首先我們展示下布局文件中的3個spinner <LinearLayout android:layout_height ...
之前看的省市區街道四級聯動的插件,感覺和公司要求的有些不符合,就自己寫了一個 因為要讀取本地json文件,所以要跑下服務器 下載browser-sync 然后在項目目錄下運行browser-sync start --server --file "**" html css ...
首先呈現效果圖 1.我的是通過element-ui實現的;可自由選擇UI 2.話不多說,直接上代碼,結構非常簡單 3.js部分(重點部分是實現字段的重重過濾) 4.城市數據代碼格式 { value: 1, label ...