摘要：
//v5orhigherimport'vue-area-linkage/dist/index.css'；//v2o'vue-area-linkage'中的边缘端口VueAreaLinkage；area selectv model=“selected”>；面积cascaderv模型=“selected2”>；//V5和更高版本<；
很多时候我们需要使用地址三级联动，即省市区三级联动。网上有很多插件，在此介绍Vue的一款地区联动插件：vue-area-linkage，下面介绍如何使用这个插件实现地址联动效果：
一、安装
// 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
二、在main.js上进行依赖注入
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>
组件中还需要引入
import { pca, pcaa } from 'area-data';同时data数据中
selected: [],
pca: pca,
pcaa: pcaa属性
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 | - | - | 地区数据 |
type值可以更改返回的数据格式很有用
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 | - | - | 地区数据 |
另：
大家可以看到只是出现基本的效果，而样式看起来很不舒服，这是因为该插件的UI基于Element UI，所以如果需要使用样式需要依赖Element UI。但是很多情况下设计图的样式都是我们自定义的，此时可以自行修改样式代码，只需要在文件中写多一个公共的style文件修改对应的类名样式来覆盖之前的样式代码即可，需注意这个style文件不可以加上scoped。