快捷導(dǎo)航

vue地區(qū)選擇組件教程詳解

更新時(shí)間：2018年05月04日 11:06:10 作者：焙烤漢堡

這篇文章主要介紹了vue地區(qū)選擇組件主要用于全國(guó)地區(qū)數(shù)據(jù)的操作，包括省，市，區(qū)三級(jí)聯(lián)動(dòng)，地區(qū)數(shù)據(jù)的添加和刪除,本文重點(diǎn)給大家介紹vue地區(qū)選擇組件教程詳解，需要的朋友參考下吧

概述

主要用于全國(guó)地區(qū)數(shù)據(jù)的操作，包括省，市，區(qū)三級(jí)聯(lián)動(dòng)，地區(qū)數(shù)據(jù)的添加和刪除；在操作地區(qū)數(shù)據(jù)時(shí)，以前也用過(guò)樹(shù)形的地區(qū)選擇組件，但因其在再操作大量的地區(qū)數(shù)據(jù)時(shí)，渲染緩慢，所以我們就換了另一種數(shù)據(jù)展示形式和交互形式，從而就有了這個(gè)組件。

注意：該組件是 vue.js 組件

demo

搶鮮體驗(yàn)請(qǐng)點(diǎn)擊這里 demo

API

Props

參數(shù)	類(lèi)型	說(shuō)明
area	Array	傳入組件的地區(qū)的數(shù)據(jù)

Events

事件名	參數(shù)	說(shuō)明
selected	area	組件中選中的地區(qū)

詳細(xì)說(shuō)明

Props

area

area 參數(shù)是必選項(xiàng)，表示組件初始化時(shí)的地區(qū)數(shù)據(jù)，可以為空。 area 是一個(gè)包含多個(gè)對(duì)象的數(shù)組，其中每個(gè)對(duì)象的數(shù)據(jù)結(jié)構(gòu)如下:

...
area: [
 {Name: '北京', ID: '01'},
 {Name: '南京', ID: '0401'},
 {Name: '西湖區(qū)', ID: '060105'}
],
...

因?yàn)楹髞?lái)在實(shí)際的使用中，發(fā)現(xiàn)有時(shí)候，后臺(tái)只會(huì)返回一個(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ù)的對(duì)象組成的數(shù)組，數(shù)據(jù)結(jié)構(gòu)和 area 參數(shù)一樣

簡(jiǎn)單的例子

<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ū)選擇組件教程詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: