数据源已更新为腾讯位置服务(行政区划)API,增加了香港、澳门、**相关数据~
未安装ElementUI
npm install -S element-ui v-regions
已安装ElementUI
npm install -S v-regions
你可以引入整个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>