基于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 相关文章推荐
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
JavaScript动态插入script的基本思路及实现函数
Nov 11 Javascript
JS实现侧悬浮浮动实例代码
Nov 29 Javascript
jquery easyui中treegrid用法的简单实例
Feb 18 Javascript
jQuery+CSS3实现树叶飘落特效
Feb 01 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 Javascript
plupload+artdialog实现多平台上传文件
Jul 19 Javascript
js多个物体运动功能实例分析
Dec 20 Javascript
Angularjs实现下拉框联动的示例代码
Aug 22 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
May 24 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 Javascript
详解JSON.parse和JSON.stringify用法
Feb 18 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 文本文件的读取效率
2012/02/10 PHP
基于PHP array数组的教程详解
2013/06/05 PHP
Linux+Nginx+MySQL下配置论坛程序Discuz的基本教程
2015/12/23 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
PHP-FPM和Nginx的通信机制详解
2019/02/01 PHP
PHP封装的mysqli数据库操作类示例
2019/02/16 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
删除节点的jquery代码
2014/01/13 Javascript
js判断手机和pc端选择不同执行事件的方法
2015/01/30 Javascript
js实现数组转换成json
2015/06/26 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
深入理解vue-loader如何使用
2017/06/06 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
vue 使用外部JS与调用原生API操作示例
2019/12/02 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
[04:03]DOTA2肉山黑名单梦之声 风暴之灵中文配音鉴赏
2013/07/03 DOTA
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
解决PyCharm同目录下导入模块会报错的问题
2018/10/13 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
python读取指定字节长度的文本方法
2019/08/27 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
如何用 Python 制作 GitHub 消息助手
2021/02/20 Python
设计师珠宝:Ylang 23
2018/05/11 全球购物
Priority Pass机场贵宾室会籍计划:全球超过1200间机场贵宾室
2018/08/26 全球购物
党员自我评价分享
2013/12/13 职场文书
高中生家长会演讲稿
2014/01/14 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书
python四种出行路线规划的实现
2021/06/23 Python