Vue使用vue-area-linkage實現(xiàn)地址三級聯(lián)動效果的示例
很多時候我們需要使用地址三級聯(lián)動，即省市區(qū)三級聯(lián)動。網上有很多插件，在此介紹Vue的一款地區(qū)聯(lián)動插件：vue-area-linkage，下面介紹如何使用這個插件實現(xiàn)地址聯(lián)動效果：
1.安裝vue-area-linkage插件：npm install --save vue-area-linkage --registry=https://registry.npm.taobao.org --verbose
2.在main.js上進行依賴注入，如下圖所示：
3.在對應vue文件的template模板上寫html標簽，如下圖所示：
4.在對應vue文件的script上進行data默認，如下圖所示：
此時效果已經基本實現(xiàn)，如下圖所示：
注意：該插件有多種聯(lián)動效果，我這里做的是省市區(qū)街四級聯(lián)動，所以 :level='3'。需要其他效果可去網上查詢其他效果代碼，點擊查看。
5.大家可以看到只是出現(xiàn)基本的效果，而樣式看起來很不舒服，這是因為該插件的UI基于Element UI，所以如果需要使用樣式需要依賴Element UI。但是很多情況下設計圖的樣式都是我們自定義的，此時可以自行修改樣式代碼，只需要在文件中寫多一個公共的style文件修改對應的類名樣式來覆蓋之前的樣式代碼即可，需注意這個style文件不可以加上scoped，如下圖紅框所示：
此時效果如下圖所示：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
- Vue實現(xiàn)省市區(qū)三級聯(lián)動
- vue + elementUI實現(xiàn)省市縣三級聯(lián)動的方法示例
- vue移動端城市三級聯(lián)動組件使用詳解
- 詳解Vue、element-ui、axios實現(xiàn)省市區(qū)三級聯(lián)動
- 基于Vue2實現(xiàn)簡易的省市區(qū)縣三級聯(lián)動組件效果
- 使用vue2實現(xiàn)帶地區(qū)編號和名稱的省市縣三級聯(lián)動效果
- vue基于mint-ui實現(xiàn)城市選擇三級聯(lián)動
- Vue2仿淘寶實現(xiàn)省市區(qū)三級聯(lián)動
- vue.js模仿京東省市區(qū)三級聯(lián)動的選擇組件實例代碼
- Vue自定義省市區(qū)三級聯(lián)動
相關文章
Vue $emit()不能觸發(fā)父組件方法的原因及解決
這篇文章主要介紹了Vue $emit()不能觸發(fā)父組件方法的原因及解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要給大家介紹了關于uniapp中app與webview通訊的相關資料,這里的通信主要是打包APP端和web-view內嵌網頁的雙向通信,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了Vue項目打包部署到iis服務器的配置方法，文中通過代碼示例給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了關于Vue項目使用scss終端發(fā)出警告的解決方法,出現(xiàn)這個問題的原因是項目中使用了DartSass舊版的JavaScriptAPI,這些API已被棄用,文章將解決的辦法介紹的非常詳細,需要的朋友可以參考下2025-04-04
這篇文章主要介紹了多個vue項目復用一個node_modules的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
解決使用Vue.js顯示數(shù)據的時,頁面閃現(xiàn)原始代碼的問題
下面小編就為大家分享一篇解決使用Vue.js顯示數(shù)據的時,頁面閃現(xiàn)原始代碼的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了Vue之Computed依賴收集與更新原理分析,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了詳解vuex持久化插件解決瀏覽器刷新數(shù)據消失問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
使用konva和vue-konva庫實現(xiàn)拖拽滑塊驗證功能
這篇文章主要介紹了使用konva和vue-konva完成前端拖拽滑塊驗證功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
這篇文章主要介紹了Vue中的filter與directive的相關資料，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-05-05