vue-area-linkage

by dwqs

省市区联动选择: https://dwqs.github.io/vue-area-linkage/

424 Stars 80 Forks Last release: almost 2 years ago (v5.1.0) MIT License 271 Commits 21 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

npm-version license

vue-area-linkage

省市区联动选择. 组合数据来源:area-data

Installation

Install the pkg with npm: ``` // v5之前的版本 npm i --save vue-area-linkage

// v5及之后的版本 npm i --save vue-area-linkage area-data

or yarn
// v5之前的版本 yarn add vue-area-linkage

// v5及之后的版本 yarn add vue-area-linkage area-data ```

Usage

import Vue from 'vue';
import { pca, pcaa } from 'area-data'; // v5 or higher
import 'vue-area-linkage/dist/index.css'; // v2 or higher
import VueAreaLinkage from 'vue-area-linkage';

Vue.use(VueAreaLinkage)

// v5之前的版本

// v5及之后的版本 // 省市 // 省市区: // 省市 // 省市区:

//setting

More demo to visit here.

On Demand Import

version >= 2.1.2

安装 babel-plugin-on-demand-import:

npm i babel-plugin-on-demand-import -D

修改

.babelrc
:
{
    // ...
    "plugins": [
        ["on-demand-import" {
            "libraryName": "vue-area-linkage",
            "libraryPath": "dist/lib"
        }]
    ]
}
import 'vue-area-linkage/dist/index.css'; // v2 or higher
import pcaa from 'area-data/pcaa';
// Only import AreaCascader component
import { AreaCascader } from 'vue-area-linkage';
Vue.use(AreaCascader);

// Only import AreaSelect component import { AreaSelect } from 'vue-area-linkage'; Vue.use(AreaSelect);

属性

area-select 组件

| 参数 | 类型 | 可选值 | 默认值 | 说明 | | :--: | :--: | :--: | :--: | :--: | | type | String | all/code/text | code | 设置返回的数据格式 | | placeholders | Array | - | [] | 设置 placeholder text | | level | Number | 0/1/2 | 1 | 设置联动层级(0-只选省份/1-省市联动/2-省市区联动) | | size | String | small/medium/large | medium | 设置输入框的大小 | | disabled | Boolean | - | false | 是否禁用 | | data | Object | - | - | 地区数据(v5需要传入) | | icon | String | - | area-select-icon | 自定义下拉小图标 | | disableLinkage | Boolean | - | true | 地区选择是否进行联动 |

v4 仅支持省市区联动,即 v4 不再支持 level 的值为 3(省市区街联动)

area-cascader 组件

| 参数 | 类型 | 可选值 | 默认值 | 说明 | | :--: | :--: | :--: | :--: | :--: | | type | String | all/code/text | code | 设置返回的数据格式 | | placeholder | String | - | '' | 设置 placeholder text | | level | Number | 0/1 | 0 | 设置联动层级(0-省市联动/1-省市区联动) | | size | String | small/medium/large | medium | 设置输入框的大小 | | separator | String | - | '-' | 显示选中文本的分隔符 | | disabled | Boolean | - | false | 是否禁用 | | data | Object | - | - | 地区数据(v5需要传入) |

事件

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

change 事件在 1.2.5 之后提供

Related Project

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.