vue-area-linkage

    5.1.0 • Public • Published

    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之前的版本
    <area-select v-model="selected"></area-select>
    <area-cascader v-model="selected2"></area-cascader>
    
    // v5及之后的版本
    <area-select v-model="selected" :data="pca"></area-select> // 省市
    // 省市区:<area-select v-model="selected" :data="pcaa"></area-select>
    <area-cascader v-model="selected2" :data="pca"></area-cascader> // 省市
    // 省市区:<area-cascader v-model="selected2" :data="pcaa"></area-cascader>
    
    //setting
    <area-select type='all' :level='2' v-model="selected" :data="pcaa"></area-select>
    <area-cascader type='all' v-model="selected2" :level='1' :data="pcaa"></area-cascader>
    

    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);
    
    <area-cascader v-model="val" level={1} :data="pcaa"></area-cascader>
    
    // Only import AreaSelect component
    import { AreaSelect } from 'vue-area-linkage';
    Vue.use(AreaSelect);
    
    <area-select v-model="val2" level={2} :data="pcaa"></area-select>
    

    属性

    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

    License

    MIT.

    Install

    npm i vue-area-linkage

    DownloadsWeekly Downloads

    1,607

    Version

    5.1.0

    License

    MIT

    Unpacked Size

    463 kB

    Total Files

    7

    Last publish

    Collaborators

    • dwqs