基于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 选择最后一项时触发 返回省市区的值

项目地址: https://github.com/jcc/v-distpicker


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

微信力量

微信力量

谢晓萍等著 / 机械工业出版社华章公司 / 2015-10-28 / 59.00

微信俨然已进化为一种万能的连接器,拥有连接一切的能力,彰显出强大的连接力,无处不在,无所不能。本书将为你讲述连接为何能产生如此巨大的力量,这股力量正在商业和民生领域产生的变化,将为你展现微信生态进化的全景世界。 连接即入口,微信上的每一次有效的连接都会形成有效的入口。本书详细讲解了如何通过微信帮助餐饮、酒店、医院、零售、商场、电气、母婴、航空、客运、停车场、商圈、城市服务等数十个传统行业与它......一起来看看 《微信力量》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具