基于Vue2的简易的省市区县三级联动组件
栏目: JavaScript · 发布时间: 6年前
内容简介：这是一个基于Vue2的简易省市区县三级联动组件，可以控制只显示省级或只显示省市两级，可设置默认值等。提供原始省市县代码和名称数据，适用于各种有关城市区县的应用。
这是一个基于Vue2的简易省市区县三级联动组件，可以控制只显示省级或只显示省市两级，可设置默认值等。提供原始省市县代码和名称数据，适用于各种有关城市区县的应用。
安装
我们使用npm安装：
npm install v-distpicker --save
使用
首先在模板中加入组件：
<v-distpicker></v-distpicker>
如果要带默认值，则可以这样：
<v-distpicker province="广东省" city="广州市" area="海珠区"></v-distpicker>
然后在js部分调用组件：
<script>
import VDistpicker from 'v-distpicker'
export default {
name: 'App',
components: {
VDistpicker
}
}
</script>
这样就可以了，如果要使用更多属性配置和方法请参照以下两个表格。
属性配置
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| province | 省份（选填） | String | 省份名 | null |
| city | 城市（选填） | String | 城市名 | null |
| area | 地区（选填） | String | 地区名 | null |
| type | 类型（选填，默认 select） | String | mobile | null |
| disabled | 是否禁用（选填，默认 false，且 type='mobile' 时无效） | Boolean | true, false | false |
| hide-area | 隐藏地区（选填） | Boolean | true, false | false |
| onlu-province | 只显示省份（选填） | Boolean | true, false | false |
| static-placeholder | 是否将占位符显示为已经选择的项（仅 type='mobile' 时有效） | Boolean | true, false | false |
| placeholders | 占位符（选填） | Object | province, city, area | { province: '省', city: '市', area: '区' } |
| wrapper | 外层 Class（选填） | String | customize | address |
| address-header | address-header 样式（选填，类型必须为 mobile） | String | customize | address-header |
| address-container | address-container 样式（选填，类型必须为 mobile） | String | customize | address-contaniner |
方法
| 方法 | 说明 | 参数 |
|---|---|---|
| province | 选择省份 | 返回省份的值 |
| city | 选择城市 | 返回城市的值 |
| area | 选择地区 | 返回地区的值 |
| selected | 选择最后一项时触发 | 返回省市区的值 |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Java编程的逻辑
马俊昌 / 机械工业出版社 / 2018-1-1 / 99
Java专家撰写，力求透彻讲解每个知识点，逐步建立编程知识图谱。本书以Java语言为例，由基础概念入手，到背后实现原理与逻辑，再到应用实践，融会贯通。 全书共六大部分，其要点如下。 第一部分（第1～2章）讲解计算机程序的基本执行流程与元素，以及数据背后的二进制表示，帮读者掌握编程的基本概念。 第二部分（第3～7章）讲解面向对象的编程原理与逻辑，涉及类、继承与多态、接口与抽象类、异......一起来看看 《Java编程的逻辑》 这本书的介绍吧!
SHA 加密
SHA 加密工具
UNIX 时间戳转换
UNIX 时间戳转换