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