vue地區選擇元件

焙烤漢堡發表於2018-04-29
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地址

相關文章