基于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 相关文章推荐
javascript Xml增删改查(IE下)操作实现代码
Jan 30 Javascript
基于jquery的时间段实现代码
Aug 02 Javascript
JavaScript加强之自定义event事件
Sep 21 Javascript
JQuery显示隐藏页面元素的方法总结
Apr 16 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
Aug 19 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
Jun 17 Javascript
浅谈如何使用webpack构建多页面应用
May 30 Javascript
vue绑定事件后获取绑定事件中的this方法
Sep 15 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
Apr 17 Javascript
JS实现盒子拖拽效果
Feb 06 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
Dec 03 Javascript
使用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动态生成VRML网页
2006/10/09 PHP
傻瓜化配置PHP环境――Appserv
2006/12/13 PHP
PHP中Date获取时间不正确怎么办
2008/06/05 PHP
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
Javascript倒计时代码
2010/08/12 Javascript
分享XmlHttpRequest调用Webservice的一点心得
2012/07/20 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
详解Webwork中Action 调用的方法
2016/02/02 Javascript
jQuery代码性能优化的10种方法
2016/06/21 Javascript
JS动态添加选项案例分析
2016/10/17 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
Vue中computed与methods的区别详解
2018/03/24 Javascript
详解React中setState回调函数
2018/06/14 Javascript
浅谈一种让小程序支持JSX语法的新思路
2019/06/16 Javascript
生成无限制的微信小程序码的示例代码
2019/09/20 Javascript
微信小程序自定义弹出层效果
2020/05/26 Javascript
[35:43]2018DOTA2亚洲邀请赛 4.1 小组赛B组 paiN vs Effect
2018/04/03 DOTA
10分钟教你用Python实现微信自动回复功能
2018/11/28 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
python实现取余操作的简单实例
2020/08/16 Python
python re.match()用法相关示例
2021/01/27 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
2013/01/09 HTML / CSS
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
美国亚洲时尚和美容产品的一站式网上商店:Stylevana
2019/09/05 全球购物
六年级作文之家庭作文
2019/12/12 职场文书
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python