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 | 选中值发生变化时触发 | 目前选择的值 |
本文版权属于jQuery之家,转载请注明出处:http://www.htmleaf.com/vue/vue-component/202303155930.html