vue地區選擇組件

AddressMap

a vue.js component

概述

主要用於全國地區數據的操做，包括省，市，區三級聯動，地區數據的添加和刪除； 在操做地區數據時，之前也用過樹形的地區選擇組件，但因其在再操做大量的地區數據時，渲染緩慢，因此咱們就換了另外一種數據展現形式和交互形式，從而就有了這個組件。

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

demo

搶鮮體驗請點擊這裏demo

API

Props

參數	類型	說明
area	Array	傳入組件的地區的數據

Events

事件名	參數	說明
selected	area	組件中選中的地區

詳細說明

Props

area

area 參數是必選項，表示組件初始化時的地區數據，能夠爲空。 area 是一個包含多個對象的數組，其中每一個對象的數據結構以下:

...
area: [
    {Name: '北京',  ID: '01'},
    {Name: '南京', ID: '0401'},
    {Name: '西湖區', ID: '060105'}
],
...
複製代碼

由於後來在實際的使用中，發現有時候，後臺只會返回一個地區的ID值，因此這裏作了優化，能夠只傳入ID的值，好比這樣：

...
area: [
    {ID: '01'},
    {ID: '0401'},
    {ID: '060105'}
],
...
複製代碼

selected

selected是由組件內部發布的一個事件，你能夠在組件外面訂閱這個事件，從而獲得它返回的值，這個值就是組件當前選中的全部的地區，返回的這個值是由多個包含地區數據的對象組成的數組，數據結構和 area參數同樣

簡單的例子

<div>
     <addressmap :area="area" @selected="selected"></addressmap>
</div>
複製代碼

安裝和使用

npm install adc-addressmap
複製代碼

• 若做爲全局組件使用

//在項目入口文件
import Vue from 'vue'
import Addressmap from 'adc-addressmap'
Vue.component('Addressmap', Addressmap)
複製代碼

• 若做爲局部組件

//在某個組件中
import Addressmap from 'adc-addressmap'
export default {
...
  components: { Addressmap},
...
}
複製代碼

該組件後續功能的預告

• 結合百度的ECharts增長數據可視化的功能

最後歡迎Star

github地址