jqhph/v-regions

2021最新省市区县三级联动(数据源：腾讯位置服务（行政区划）API) 基于Vue2.x、ElementUI2.x省市区县三级联动

Vue2.x ElementUI2.x 2021最新省市区县三级联动

最近更新（2021年6月19日）

数据源已更新为腾讯位置服务（行政区划）API，增加了香港、澳门、**相关数据~

案例和文档（Examples and Documentation）

v-regions案例和文档

安装

未安装ElementUI

npm install -S element-ui v-regions

已安装ElementUI

npm install -S v-regions

引入VeRegions

你可以引入整个VeRegions，或是根据需要仅引入部分组件。我们先介绍如何引入完整的VeRegions。

完整引入

在main.js中写入一下内容

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import VeRegions from "v-regions";

Vue.use(ElementUI);

Vue.use(VeRegions);

以上代码便完成了VeRegions的引入。

按需引入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import { VeProvince, VeProvinceCity, VeProvinceCityArea, VeCascader } from "v-regions";

Vue.use(ElementUI);

Vue.use(VeProvince);
Vue.use(VeProvinceCity);
Vue.use(VeProvinceCityArea);
Vue.use(VeCascader);

省、省市、省市区(县)、级联省市区(县)三级联动

组件均支持属性以下属性

禁用

组件	参数	类型	可选值	默认值
ve-province	Boolean	disabled	true/false	false
ve-province-city	Boolean	disabled	true/false	false
ve-province-city-area	Boolean	disabled	true/false	false

是否显示"全部"

组件	参数	类型	可选值	默认值
ve-province	Boolean	is-all	true/false	false
ve-province-city	Boolean	is-all	true/false	false
ve-province-city-area	Boolean	is-all	true/false	false

可自定义"全部"

组件	参数	类型	可选值	默认值
ve-province	String	all-text	--	全部
ve-province-city	String	all-text	--	全部
ve-province-city-area	String	all-text	--	全部

尺寸

组件	参数	类型	可选值	默认值
ve-province	String	size	medium/small/mini	--
ve-province-city	String	size	medium/small/mini	--
ve-province-city-area	String	size	medium/small/mini	--

<template>
  <div id="app">
    <ve-province v-model="province"></ve-province>
    <br />
    <ve-province-city v-model="provinceCity"></ve-province-city>
    <br />
    <ve-province-city-area v-model="sregion"></ve-province-city-area>
    <br />
    <ve-cascader v-model="cregion"></ve-cascader>
    <br />
  </div>
</template>

<script>
export default {
  data () {
    return {
      province: {},
      provinceCity: {},
      sregion: {},
      cregion: {},
    }
  }
}
</script>

数据来源

告花子/2021最新省市区.