Vue使用vue-area-linkage實現(xiàn)地址三級聯(lián)動效果的示例
很多時候我們需要使用地址三級聯(lián)動，即省市區(qū)三級聯(lián)動。網(wǎng)上有很多插件，在此介紹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上進(jìn)行依賴注入，如下圖所示：
3.在對應(yīng)vue文件的template模板上寫html標(biāo)簽，如下圖所示：
4.在對應(yīng)vue文件的script上進(jìn)行data默認(rèn)，如下圖所示：
此時效果已經(jīng)基本實現(xiàn)，如下圖所示：
注意：該插件有多種聯(lián)動效果，我這里做的是省市區(qū)街四級聯(lián)動，所以 :level='3'。需要其他效果可去網(wǎng)上查詢其他效果代碼，點擊查看。
5.大家可以看到只是出現(xiàn)基本的效果，而樣式看起來很不舒服，這是因為該插件的UI基于Element UI，所以如果需要使用樣式需要依賴Element UI。但是很多情況下設(shè)計圖的樣式都是我們自定義的，此時可以自行修改樣式代碼，只需要在文件中寫多一個公共的style文件修改對應(yīng)的類名樣式來覆蓋之前的樣式代碼即可，需注意這個style文件不可以加上scoped，如下圖紅框所示：
此時效果如下圖所示：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- 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)動
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue.use源碼，Vue.use方法的引入，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
vue3調(diào)度器effect的scheduler功能實現(xiàn)詳解
這篇文章主要為大家介紹了vue3調(diào)度器effect的scheduler功能實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
Vue3?攜手?TypeScript?搭建完整項目結(jié)構(gòu)
TypeScript 是JS的一個超級，主要提供了類型系統(tǒng)和對ES6的支持，使用 TypeScript 可以增加代碼的可讀性和可維護(hù)性，在 react 和 vue 社區(qū)中也越來越多人開始使用TypeScript，這篇文章主要介紹了Vue3?攜手?TypeScript?搭建完整項目結(jié)構(gòu),需要的朋友可以參考下2022-04-04
這篇文章主要介紹了解決Vue+ts里面this.$store問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
利用vite創(chuàng)建vue3項目的全過程及一個小BUG詳解
Vite作為一個構(gòu)建工具,提供了一種快速的方法來構(gòu)建Vue應(yīng)用,而Vue3?則是一個前端框架,提供了強(qiáng)大的功能來構(gòu)建和管理前端項目,下面這篇文章主要給大家介紹了關(guān)于利用vite創(chuàng)建vue3項目的全過程及一個小BUG的相關(guān)資料,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Vue.js計算屬性和偵聽器的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2018-05-05
如何在Vue 3中擴(kuò)展Vue Router鏈接詳解
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁面應(yīng)用,這篇文章主要給大家介紹了關(guān)于如何在Vue 3中擴(kuò)展Vue Router鏈接的相關(guān)資料,需要的朋友可以參考下2021-06-06
Vue如何實現(xiàn)利用vuex永久儲存數(shù)據(jù)
這篇文章主要介紹了Vue如何實現(xiàn)利用vuex永久儲存數(shù)據(jù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue-element-admin如何從mock數(shù)據(jù)過渡到使用后臺接口
這篇文章主要介紹了vue-element-admin如何從mock數(shù)據(jù)過渡到使用后臺接口問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
很多人知道插槽分為三種，但是實際到elementui當(dāng)中為什么這么用，就一臉懵逼，接下來就跟大家聊一聊插槽在elementui中的應(yīng)用，并且自己寫一個類似el-table的組件，感興趣的可以了解一下2023-05-05