基于Vue2实现简易的省市区县三级联动组件效果


Posted in Javascript onNovember 05, 2018

这是一个基于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

总结

以上所述是小编给大家介绍的基于Vue2实现简易的省市区县三级联动组件效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Locate a File Using a File Open Dialog Box
Jun 18 Javascript
Mootools 1.2 手风琴(Accordion)教程
Sep 15 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
Apr 02 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
浅析node.js的模块加载机制
May 25 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
微信浏览器左上角返回按钮监听的实现
Mar 04 Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 Javascript
jquery实现简易验证插件封装
Sep 13 jQuery
使用vue2实现带地区编号和名称的省市县三级联动效果
Nov 05 #Javascript
vue router的基本使用和配置教程
Nov 05 #Javascript
微信小程序tabbar底部导航
Nov 05 #Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 #Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 #Javascript
小程序实现选择题选择效果
Nov 04 #Javascript
小程序实现单选多选功能
Nov 04 #Javascript
You might like
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
PHP语法自动检查的Vim插件
2014/08/11 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
详解参数传递四种形式
2015/07/21 Javascript
Bootstrap每天必学之弹出框(Popover)插件
2016/04/25 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
JavaScript  event对象整理及详细介绍
2016/10/10 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
详解webpack模块加载器兼打包工具
2018/09/11 Javascript
[01:17:12]职来职往完美电竞专场
2014/09/18 DOTA
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
python实现将pvr格式转换成pvr.ccz的方法
2015/04/28 Python
Python中跳台阶、变态跳台阶与矩形覆盖问题的解决方法
2018/05/19 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
python定时检测无响应进程并重启的实例代码
2019/04/22 Python
如何使用python进行pdf文件分割
2019/11/11 Python
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
国外的一些J2EE面试题一
2012/10/13 面试题
土木工程应届生自荐信
2013/09/24 职场文书
岗位职责的构建方法
2014/02/01 职场文书
诚信承诺书范文
2014/03/27 职场文书
社团活动总结格式
2014/08/29 职场文书
三年级学生期末评语
2014/12/26 职场文书
导游词之重庆渣滓洞
2020/01/08 职场文书
sql时间段切分实现每隔x分钟出一份高速门架车流量
2022/02/28 SQL Server
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python