vue城市三级联动组件 vue-area-linkage

77 阅读 0 评论 51 点赞

我是靠谱客的博主高贵橘子，这篇文章主要介绍vue城市三级联动组件 vue-area-linkage，现在分享给大家，希望可以做个参考。

Install the pkg with npm:

复制代码

1
2
3
4
5
// v5之前的版本
npm i --save vue-area-linkage
// v5及之后的版本
npm i --save vue-area-linkage area-data

　　目前基本都是5之后的了

main.js中

复制代码

1
2
3
import VueAreaLinkage from 'vue-area-linkage';
Vue.use(VueAreaLinkage)

　　组件中

复制代码

1
2
import {pca, pcaa} from 'area-data'; // 城市数据
import 'vue-area-linkage/dist/index.css'; // 样式

复制代码

1
2
3
4
5
6
7
 data () {
return {
pca: pca,
pcaa: pcaa,
selected2: '',
}
}

d代码

复制代码

1
2
3
4
5
6
7
8
9
10
11
// 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>