vue-area-linkage

Installation

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

// 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 higherimport 'vue-area-linkage/dist/index.css'; // v2 or higherimport 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>

On Demand Import

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

{    // ...    "plugins": [        ["on-demand-import" {            "libraryName": "vue-area-linkage",            "libraryPath": "dist/lib"        }]    ]}

import 'vue-area-linkage/dist/index.css'; // v2 or higherimport pcaa from 'area-data/pcaa';// Only import AreaCascader componentimport { AreaCascader } from 'vue-area-linkage';Vue.use(AreaCascader);<area-cascader v-model="val" level={1} :data="pcaa"></area-cascader>// Only import AreaSelect componentimport { AreaSelect } from 'vue-area-linkage';Vue.use(AreaSelect);<area-select v-model="val2" level={2} :data="pcaa"></area-select>

属性

area-select 组件

area-cascader 组件

事件

Related Project

License