快捷導(dǎo)航

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)行依賴注入，如下圖所示：

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

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

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

您可能感興趣的文章:

相關(guān)文章

Vue.use源碼分析
這篇文章主要為大家詳細(xì)介紹了Vue.use源碼，Vue.use方法的引入，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-04-04
vue3調(diào)度器effect的scheduler功能實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了vue3調(diào)度器effect的scheduler功能實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
Vue3?攜手?TypeScript?搭建完整項(xiàng)目結(jié)構(gòu)
TypeScript 是JS的一個(gè)超級(jí)，主要提供了類型系統(tǒng)和對(duì)ES6的支持，使用 TypeScript 可以增加代碼的可讀性和可維護(hù)性，在 react 和 vue 社區(qū)中也越來越多人開始使用TypeScript，這篇文章主要介紹了Vue3?攜手?TypeScript?搭建完整項(xiàng)目結(jié)構(gòu),需要的朋友可以參考下
2022-04-04
解決Vue+ts里面this.$store問題
這篇文章主要介紹了解決Vue+ts里面this.$store問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03
利用vite創(chuàng)建vue3項(xiàng)目的全過程及一個(gè)小BUG詳解
Vite作為一個(gè)構(gòu)建工具,提供了一種快速的方法來構(gòu)建Vue應(yīng)用,而Vue3?則是一個(gè)前端框架,提供了強(qiáng)大的功能來構(gòu)建和管理前端項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于利用vite創(chuàng)建vue3項(xiàng)目的全過程及一個(gè)小BUG的相關(guān)資料,需要的朋友可以參考下
2023-04-04
深入淺析Vue.js計(jì)算屬性和偵聽器
這篇文章主要介紹了Vue.js計(jì)算屬性和偵聽器的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
2018-05-05
如何在Vue 3中擴(kuò)展Vue Router鏈接詳解
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁(yè)面應(yīng)用,這篇文章主要給大家介紹了關(guān)于如何在Vue 3中擴(kuò)展Vue Router鏈接的相關(guān)資料,需要的朋友可以參考下
2021-06-06
Vue如何實(shí)現(xiàn)利用vuex永久儲(chǔ)存數(shù)據(jù)
這篇文章主要介紹了Vue如何實(shí)現(xiàn)利用vuex永久儲(chǔ)存數(shù)據(jù)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue-element-admin如何從mock數(shù)據(jù)過渡到使用后臺(tái)接口
這篇文章主要介紹了vue-element-admin如何從mock數(shù)據(jù)過渡到使用后臺(tái)接口問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
Vue模擬el-table演示插槽用法的示例詳解
很多人知道插槽分為三種，但是實(shí)際到elementui當(dāng)中為什么這么用，就一臉懵逼，接下來就跟大家聊一聊插槽在elementui中的應(yīng)用，并且自己寫一個(gè)類似el-table的組件，感興趣的可以了解一下
2023-05-05