Vue使用vue-area-linkage實(shí)現(xiàn)地址三級(jí)聯(lián)動(dòng)效果的示例

更新時(shí)間：2018年06月27日 09:41:55 作者：紫裳

很多時(shí)候我們需要使用地址三級(jí)聯(lián)動(dòng)，即省市區(qū)三級(jí)聯(lián)動(dòng)，這篇文章主要介紹了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)行依賴(lài)注入，如下圖所示：

3.在對(duì)應(yīng)vue文件的template模板上寫(xiě)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)上查詢(xún)其他效果代碼，點(diǎn)擊查看。

5.大家可以看到只是出現(xiàn)基本的效果，而樣式看起來(lái)很不舒服，這是因?yàn)樵摬寮腢I基于Element UI，所以如果需要使用樣式需要依賴(lài)Element UI。但是很多情況下設(shè)計(jì)圖的樣式都是我們自定義的，此時(shí)可以自行修改樣式代碼，只需要在文件中寫(xiě)多一個(gè)公共的style文件修改對(duì)應(yīng)的類(lèi)名樣式來(lái)覆蓋之前的樣式代碼即可，需注意這個(gè)style文件不可以加上scoped，如下圖紅框所示：

此時(shí)效果如下圖所示：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue $emit()不能觸發(fā)父組件方法的原因及解決
這篇文章主要介紹了Vue $emit()不能觸發(fā)父組件方法的原因及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
uniapp中app與webview的通訊代碼示例
這篇文章主要給大家介紹了關(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依賴(lài)收集與更新原理分析
這篇文章主要介紹了Vue之Computed依賴(lài)收集與更新原理分析,具有很好的參考價(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
這篇文章主要介紹了Vue中的filter與directive的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下
2021-05-05