Vue如何使用vue-area-linkage实现地址三级联动效果

Posted haonanzhang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue如何使用vue-area-linkage实现地址三级联动效果相关的知识,希望对你有一定的参考价值。

很多时候我们需要使用地址三级联动,即省市区三级联动。网上有很多插件,在此介绍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。

以上是关于Vue如何使用vue-area-linkage实现地址三级联动效果的主要内容,如果未能解决你的问题,请参考以下文章

vue-area-linkage Vue省市区三级列表联动插件使用

解决vue-area-linkage 无法回显的bug

解决vue-area-linkage 无法回显的bug

解决vue-area-linkage 无法回显的bug

解决vue-area-linkage 无法回显的bug

如何使用 vue 3 组合 API 实现 html 拖放