1.0.0 • Published 4 years ago

area-linkage-xcx v1.0.0

Weekly downloads
3
License
MIT
Repository
github
Last release
4 years ago

npm-version license

area-linkage-vue

省市区街道四级联动选择. 组合数据来源:area-data-vue

安装

使用 npm 安装

npm i --save area-linkage-vue area-data-vue

使用

import Vue from 'vue';
import { pcaa } from 'area-data-vue';
import 'area-linkage-vue/dist/index.css';
import AreaLinkageVue from 'area-linkage-vue';
Vue.prototype.$pcaa = pcaa;

Vue.use(AreaLinkageVue)
<area-select v-model="selected" :data="$pcaa" :level="0"></area-select>  // 省
<area-select v-model="selected" :data="$pcaa" :level="1"></area-select>  // 省市
<area-select v-model="selected" :data="$pcaa" :level="2"></area-select>  // 省市区
<area-select v-model="selected" :data="$pcaa" :level="3"></area-select>  // 省市区街道

<area-cascader v-model="selected2" :data="$pcaa" :level="0"></area-cascader>  // 省市
<area-cascader v-model="selected2" :data="$pcaa" :level="1"></area-cascader> // 省市区
<area-cascader v-model="selected2" :data="$pcaa" :level="2"></area-cascader> // 省市区街道

更多演示访问 这里.

属性

area-select 组件

参数类型可选值默认值说明
typeStringall/code/textcode设置返回的数据格式
placeholdersArray-[]设置 placeholder text
levelNumber0/1/2/31设置联动层级(0-只选省份/1-省市联动/2-省市区联动/3-省市区街道联动)
sizeStringsmall/medium/largemedium设置输入框的大小
disabledBoolean-false是否禁用
dataObject--地区数据
iconString-area-select-icon自定义下拉小图标
disableLinkageBoolean-true地区选择是否进行联动

area-cascader 组件

参数类型可选值默认值说明
typeStringall/code/textcode设置返回的数据格式
placeholderString-''设置 placeholder text
levelNumber0/1/20设置联动层级(0-省市联动/1-省市区联动/2-省市区街道联动)
sizeStringsmall/medium/largemedium设置输入框的大小
separatorString-'-'显示选中文本的分隔符
disabledBoolean-false是否禁用
dataObject--地区数据

事件

事件名说明参数
change选中值发生变化时触发目前选择的值

License

MIT.