AddressMap

a vue.js component

An overview of the

It is mainly used for the operation of national regional data, including the three-level linkage of province, city and district, adding and deleting regional data; The tree-shaped locale selection component was used before when manipulating locale data, but it was slow rendering when manipulating large amounts of locale data, so we switched to a different data presentation and interaction form, resulting in this component.

Note: This component is a vue.js component

demo

Grab fresh experience please click here demo

API

Props

parameter type instructions
area Array Data for the locale passed to the component

Events

The event name parameter instructions
selected area The region selected in the component

Detailed instructions

Props

area

The area parameter is mandatory and indicates the area data during component initialization. The value can be empty. An area is an array of objects, each of which has the following data structure:

. Area: [{Name: "Beijing", ID: '01'}, {Name: "nanjing", ID: '0401'}, {Name: "depressed", ID: '060105'}],...Copy the code

Later in the actual use, it was found that sometimes the background would only return the ID value of a region, so the optimization here can only pass in the ID value, for example:

. area: [ {ID: '01'}, {ID: '0401'}, {ID: '060105'} ], ...Copy the code

selected

Selected is an event published internally by the component. You can subscribe to this event outside of the component to get the value it returns. This value is all the selected locale of the component. The returned value is an array of objects containing locale data, the same structure as the area parameter

Simple example

<div>
     <addressmap :area="area" @selected="selected"></addressmap>
</div>
Copy the code

Installation and use

npm install adc-addressmap
Copy the code
  • If used as a global component
// In the project entry file
import Vue from 'vue'
import Addressmap from 'adc-addressmap'
Vue.component('Addressmap', Addressmap)
Copy the code
  • As a local component
// In a component
import Addressmap from 'adc-addressmap'
export default{... components: { Addressmap}, ... }Copy the code

A preview of the component’s future features

  • Combined with Baidu’sEChartsAdd data visualization capabilities

And finally, welcome Star

Making the address