vue地區(qū)選擇組件教程詳解
概述
主要用于全國地區(qū)數(shù)據(jù)的操作，包括省，市，區(qū)三級聯(lián)動，地區(qū)數(shù)據(jù)的添加和刪除； 在操作地區(qū)數(shù)據(jù)時(shí)，以前也用過樹形的地區(qū)選擇組件，但因其在再操作大量的地區(qū)數(shù)據(jù)時(shí)，渲染緩慢，所以我們就換了另一種數(shù)據(jù)展示形式和交互形式，從而就有了這個(gè)組件。
注意：該組件是 vue.js 組件
demo
搶鮮體驗(yàn)請點(diǎn)擊這里 demo
API
Props
| 參數(shù) | 類型 | 說明 |
|---|---|---|
| area | Array | 傳入組件的地區(qū)的數(shù)據(jù) |
Events
| 事件名 | 參數(shù) | 說明 |
|---|---|---|
| selected | area | 組件中選中的地區(qū) |
詳細(xì)說明
Props
area
area 參數(shù)是必選項(xiàng)，表示組件初始化時(shí)的地區(qū)數(shù)據(jù)，可以為空。 area 是一個(gè)包含多個(gè)對象的數(shù)組，其中每個(gè)對象的數(shù)據(jù)結(jié)構(gòu)如下:
...
area: [
{Name: '北京', ID: '01'},
{Name: '南京', ID: '0401'},
{Name: '西湖區(qū)', ID: '060105'}
],
...
因?yàn)楹髞碓趯?shí)際的使用中，發(fā)現(xiàn)有時(shí)候，后臺只會返回一個(gè)地區(qū)的 ID 值，所以這里做了優(yōu)化，可以只傳入 ID 的值，比如這樣：
...
area: [
{ID: '01'},
{ID: '0401'},
{ID: '060105'}
],
...
selected
selected 是由組件內(nèi)部發(fā)布的一個(gè)事件，你可以在組件外面訂閱這個(gè)事件，從而得到它返回的值，這個(gè)值就是組件當(dāng)前選中的所有的地區(qū)，返回的這個(gè)值是由多個(gè)包含地區(qū)數(shù)據(jù)的對象組成的數(shù)組，數(shù)據(jù)結(jié)構(gòu)和 area 參數(shù)一樣
簡單的例子
<div> <addressmap :area="area" @selected="selected"></addressmap> </div>
安裝和使用
npm install adc-addressmap
若作為全局組件使用
//在項(xiàng)目入口文件
import Vue from 'vue'
import Addressmap from 'adc-addressmap'
Vue.component('Addressmap', Addressmap)
若作為局部組件
//在某個(gè)組件中
import Addressmap from 'adc-addressmap'
export default {
...
components: { Addressmap},
...
}
總結(jié)
以上所述是小編給大家介紹的vue地區(qū)選擇組件教程詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
使用v-for指令的時(shí)候遇到一個(gè)錯(cuò)誤問題，具體錯(cuò)誤代碼在文章給大家列出，對vue v-for使用問題感興趣的朋友跟隨小編一起學(xué)習(xí)吧2019-08-08
vue項(xiàng)目中實(shí)現(xiàn)多文件上傳功能實(shí)例代碼
我們平時(shí)經(jīng)常做的是上傳文件,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中實(shí)現(xiàn)多文件上傳功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
在開發(fā)中我們想要給一個(gè)組件的顯示和消失添加某種過渡動畫,可以很好的增加用戶體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于如何快速上手Vue3過渡動畫的相關(guān)資料,需要的朋友可以參考下2022-02-02
本篇文章主要介紹了解讀vue生成的文件目錄結(jié)構(gòu)及說明，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
Vue?CLI是一個(gè)強(qiáng)大的開發(fā)工具,可用于快速搭建Vue.js項(xiàng)目,在Vue?CLI中使用自定義組件是構(gòu)建交互式和模塊化Web應(yīng)用的重要一環(huán),下面我們就來看看vue?cli中如何使用自定義的組件吧2023-11-11
本文介紹了vuejs指令的相關(guān)知識，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了Vue3基礎(chǔ)安裝以及配置詳解,需要的朋友可以參考下2023-01-01
van-dialog 組件調(diào)用報(bào)錯(cuò)的解決
這篇文章主要介紹了van-dialog 組件調(diào)用報(bào)錯(cuò)的解決，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)分頁加載效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
Vue3+Element-Plus?實(shí)現(xiàn)點(diǎn)擊左側(cè)菜單時(shí)顯示不同內(nèi)容組件展示在Main區(qū)域功能
這篇文章主要介紹了Vue3+Element-Plus?實(shí)現(xiàn)點(diǎn)擊左側(cè)菜單時(shí)顯示不同內(nèi)容組件展示在Main區(qū)域功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01