Need help with vue-area-linkage?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

dwqs
442 Stars 88 Forks MIT License 271 Commits 9 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 27,782
JavaScr...
CSS
vuejs2
reactjs
266 commits
# 76,362
CSS
React
Chrome
Gulp
1 commit
# 176,224
CSS
vuejs2
twig-ex...
data-ur...
1 commit

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.