基于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的面向对象的特性实现限制试用期
Aug 04 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
第三篇Bootstrap网格基础
Jun 21 Javascript
8 行 Node.js 代码实现代理服务器
Dec 05 Javascript
三种方式实现瀑布流布局
Feb 10 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
Jul 25 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 Javascript
JS+canvas画一个圆锥实例代码
Dec 13 Javascript
echarts多条折线图动态分层的实现方法
May 24 Javascript
通过JS判断网页是否为手机打开
Oct 28 Javascript
JavaScript canvas实现流星特效
May 20 Javascript
JavaScript异步操作中串行和并行
Nov 20 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
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
php Undefined index的问题
2009/06/01 PHP
批量去除PHP文件中bom的PHP代码
2012/03/13 PHP
PHP mysql与mysqli事务使用说明 分享
2013/08/17 PHP
php中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
扩展String功能方法
2006/09/22 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
浅析JavaScript中的delete运算符
2013/11/30 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
JS实现图片放大缩小的方法
2017/02/15 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
Vue精简版风格指南(推荐)
2018/01/30 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
微信小程序如何获取用户头像和昵称
2019/09/23 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
python编程实现归并排序
2017/04/14 Python
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
python生成圆形图片的方法
2020/03/25 Python
python读取图片并修改格式与大小的方法
2018/07/24 Python
python实现简易动态时钟
2018/11/19 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
pytorch-RNN进行回归曲线预测方式
2020/01/14 Python
Python unittest框架操作实例解析
2020/04/13 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
我的五年职业生涯规划
2014/01/23 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
2014年大学团支部工作总结
2014/12/02 职场文书
文艺有韵味的诗句(生命类、亲情类...)
2019/07/11 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书
springboot应用服务启动事件的监听实现
2022/04/06 Java/Android