基于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

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

查看所有标签

猜你喜欢:

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

码农书籍

机器消灭秘密

安迪•格林伯格 (Andy Greenberg) / 王崧、王涛、唐禾 / 重庆出版社 / 2017-8-10 / 49.8

《机器消灭秘密》一书中，格林伯格深入研究并生动再现了那些拥有全能技术的网络安全魔术师，他们将任何企图染指个人隐私的所谓国家机密的保密性打得粉碎。这本精心组织的著作是对此题材感兴趣的读者的必读之书，即便现在你可能不感兴趣，将来也极有可能希望了解这些内容，因为任何人都会不可避免地置身其中。无论你是初涉电脑屏幕之后的虚拟战场的新生，还是经验丰富的维基解密观察家，本书都是不可多得的上乘之作，你总会在其中发......一起来看看《机器消灭秘密》这本书的介绍吧!

码农工具

CSS 压缩/解压工具

在线压缩/解压 CSS 代码

XML、JSON 在线转换

在线XML、JSON转换工具