Area Linkage Vue: 中国行政区联动选择器

省、市、区、街道联动选择

快速开始

安装

npm i --save area-linkage-vue

全局注册

import Vue from 'vue';

import { pcaa } from 'area-data-vue';

import VueAreaLinkage from 'area-linkage-vue';

Vue.prototype.$pcaa = pcaa;

Vue.use(VueAreaLinkage);


基本使用

1. 作为选择器

默认形式
请选择
请选择 
[]
Show Code
只选省份
请选择 
[]
Show Code
改变大小
请选择
请选择
请选择 
[]
Show Code
返回区域文本
请选择
请选择
请选择
请选择 
[]
Show Code
返回区域代码和文本
请选择
请选择
请选择
请选择 
[]
Show Code
设置 placeholders
选择省
选择市
选择区
选择街道 
[]
Show Code

placeholders 是一个数组, 数组项顺序分别对应省/市/区.

设置默认值
广东省
深圳市
南山区
南山街道 
[
  "440000",
  "440300",
  "440305",
  "440305002"
]
Show Code

selected 是一个数组, 数组项顺序分别对应省/市/区, 且类型(区域代码/区域文本)必须统一. 以第一个元素类型为基准. 类型不统一将报错.

省市区联动
请选择
请选择
请选择
请选择 
[]
Show Code

2. 作为级联器(支持2/3/4级联动)

默认形式
请选择 
[]
Show Code
返回区域文本
请选择 
[]
Show Code
返回区域文本和代码
请选择 
[]
Show Code
设置 placeholder
请选择地区 
[]
Show Code
设置默认值
广东省/深圳市/南山区/南山街道 
[
  "440000",
  "440300",
  "440305",
  "440305002"
]
Show Code
省市区联动
请选择地区 
[]
Show Code