基于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小技巧 2.5 则
Sep 12 Javascript
利用jQuery操作对象数组的实现代码
Apr 27 Javascript
javascript中的绑定与解绑函数应用示例
Jun 24 Javascript
Javascript核心读书有感之语句
Feb 11 Javascript
javascript设计模式--策略模式之输入验证
Nov 27 Javascript
详解Bootstrap按钮
Jan 04 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
Jan 06 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 Javascript
vue或react项目生产环境去掉console.log的操作
Sep 02 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 获取select下拉列表框的值
2010/05/08 PHP
淘宝ip地址查询类分享(利用淘宝ip库)
2014/01/07 PHP
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
2013/08/30 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
js获取判断上传文件后缀名的示例代码
2014/02/19 Javascript
Node.js的Express框架使用上手指南
2016/03/12 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
Angular刷新当前页面的实现方法
2018/11/21 Javascript
小程序测试后台服务的方法(ngrok)
2019/03/08 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
python实现简单ftp客户端的方法
2015/06/28 Python
Python常用算法学习基础教程
2017/04/13 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
tensorflow如何继续训练之前保存的模型实例
2020/01/21 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
使用css如何制作时间ICON方法实践
2012/11/12 HTML / CSS
MADE法国:提供原创设计师家具
2018/09/18 全球购物
通信专业个人自我鉴定
2013/10/21 职场文书
女娲补天教学反思
2014/02/05 职场文书
工程技术员岗位职责
2014/03/02 职场文书
补充协议书范本
2014/04/23 职场文书
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
土木工程生产实习心得体会
2016/01/22 职场文书
详解Python函数print用法
2021/06/18 Python
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏