area-linkage-vue
area-linkage-vue
省市区街道四级联动选择. 组合数据来源:area-data-vue
Installation
Install the pkg with npm:
npm i --save area-linkage-vue area-data-vue
Usage
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 组件
参数 | 类型 | 可选值 | 默认值 | 说明 |
---|---|---|---|---|
type | String | all/code/text | code | 设置返回的数据格式 |
placeholders | Array | - | [] | 设置 placeholder text |
level | Number | 0/1/2/3 | 1 | 设置联动层级(0-只选省份/1-省市联动/2-省市区联动/3-省市区街道联动) |
size | String | small/medium/large | medium | 设置输入框的大小 |
disabled | Boolean | - | false | 是否禁用 |
data | Object | - | - | 地区数据 |
icon | String | - | area-select-icon | 自定义下拉小图标 |
disableLinkage | Boolean | - | true | 地区选择是否进行联动 |
area-cascader 组件
参数 | 类型 | 可选值 | 默认值 | 说明 |
---|---|---|---|---|
type | String | all/code/text | code | 设置返回的数据格式 |
placeholder | String | - | '' | 设置 placeholder text |
level | Number | 0/1/2 | 0 | 设置联动层级(0-省市联动/1-省市区联动/2-省市区街道联动) |
size | String | small/medium/large | medium | 设置输入框的大小 |
separator | String | - | '-' | 显示选中文本的分隔符 |
disabled | Boolean | - | false | 是否禁用 |
data | Object | - | - | 地区数据 |
事件
事件名 | 说明 | 参数 |
---|---|---|
change | 选中值发生变化时触发 | 目前选择的值 |
License
MIT.
Dependencies
Dependencies
area-data-vue: ^1.0.6autoprefixer: ^7.1.1babel-core: ^6.25.0babel-eslint: ^7.2.3babel-loader: ^7.1.1babel-plugin-transform-runtime: ^6.23.0babel-preset-latest: ^6.24.1clean-webpack-plugin: ^0.1.16compression-webpack-plugin: ^0.4.0cross-env: ^5.0.1css-loader: ^0.28.4cssnano: ^3.10.0eslint: ^4.1.1eslint-config-vue: ^2.0.2eslint-plugin-vue: ^2.1.0extract-text-webpack-plugin: ^2.1.2file-loader: ^0.11.2gulp-util: ^3.0.8happypack: ^4.0.0-beta.1html-webpack-plugin: ^2.29.0husky: ^0.14.3less: ^2.7.2less-loader: ^4.0.4open-browser-webpack-plugin: ^0.0.5optimize-css-assets-webpack-plugin: ^2.0.0ora: ^1.3.0postcss-loader: ^2.0.6vue: ^2.3.0vue-loader: ^13.0.0vue-style-loader: ^1.0.0vue-template-compiler: ^2.3.0webpack: ^3.0.0webpack-dev-server: ^2.5.0webpack-md5-hash: ^0.0.5webpack-parallel-uglify-plugin: ^0.4.2