компонент выбора региона vue

Байду внешний интерфейс Vue.js визуализация данных

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},
...
}

Предварительный просмотр последующих функций этого компонента

  • В сочетании с BaiduEChartsДобавьте возможности визуализации данных

Наконец приветствую Звезду

гитхаб-адрес

Категории