vue-area-linkage|基于Vue.js的中国地区地址选择器插件

当前位置:主页 > Vue > Vue组件 > vue-area-linkage|基于Vue.js的中国地区地址选择器插件
vue-area-linkage|基于Vue.js的中国地区地址选择器插件
分享:

    插件介绍

    vue-area-linkage 是一个基于 Vue.js 的中国地区地址选择器插件,它可以让用户在省、市和区三个级别中选择地址。该插件使用了 Element UI 组件库来实现地址选择器,支持多种自定义选项和事件,可以快速集成到您的应用程序中。

    浏览器兼容性

    浏览器兼容性
    时间:03-15
    阅读:
简要教程

vue-area-linkage 是一个基于 Vue.js 的中国地区地址选择器插件,它可以让用户在省、市和区三个级别中选择地址。该插件使用了 Element UI 组件库来实现地址选择器,支持多种自定义选项和事件,可以快速集成到您的应用程序中。

以下是 vue-area-linkage 插件的一些主要特点:

  • 简单易用:vue-area-linkage 插件提供了简单的 API 和丰富的自定义选项,可以快速集成到您的应用程序中。您只需要在组件中添加一个 el-area-linkage 标签即可。
  • 多种自定义选项:该插件支持多种自定义选项,如默认值、级别限制、是否显示地址编码、是否显示详细地址输入框等。
  • 响应式设计:该插件的设计具有响应式特点,可以自适应不同的屏幕大小和设备类型,以提供更好的用户体验。

使用方法

安装

如果您想使用vue-area-linkage,首先您需要安装它,命令如下:

npm i --save vue-area-linkage area-data
// 或者
yarn add vue-area-linkage area-data
		
使用

全局使用

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)	

<area-select v-model="selected" :data="pcaa"></area-select>
<area-cascader v-model="selected2" :data="pcaa"></area-cascader>

配置参数

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 地区选择是否进行联动

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 选中值发生变化时触发 目前选择的值

github网址:https://github.com/dwqs/vue-area-linkage