vue下拉列表功能实例代码


Posted in Javascript onApril 08, 2018

最近在弄作品,做了个下拉列表。心想各位小哥哥、小姐姐可能会用到相同的需求,就把下拉列表封装一下,希望能对各位小哥哥,小姐姐有帮助

github地址:

https://github.com/ClmPisces/vue-droplist

喜欢的请反手来个star,有issue的欢迎提出

安装

cnpm install vue-droplist --save

组件中导入

import DropList from 'vue-droplist'

// 显示下拉列表
showDropList() {
// 配置信息
const configData = {
position: { // 设置显示位置
top: '', 
right: '',
bottom: '',
left: ''
},
width: '40%', // 设置宽度
list: [ // 设置下拉列表数据和对应的点击事件
{text: '修改资料', action: this.updateUserInfo},
{text: '更换主题', action: this.updateTheme},
{text: '退出账号', action: this.signOut}
...
],
isShow: true //设置显示,默认false
}
DropList(configData) //执行配置信息
},
updateUserInfo() {
//do something
},
updateTheme() {
//do something
},
signOut() {
//do something
}

vue下拉列表功能实例代码 

总结

以上所述是小编给大家介绍的vue下拉列表功能实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
5款Javascript颜色选择器
Oct 25 Javascript
JQuery实现防止退格键返回的方法
Feb 12 Javascript
javascript实现控制div颜色
Jul 07 Javascript
js简单网速测试方法完整实例
Dec 15 Javascript
javascript实现label标签跳出循环操作
Mar 06 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
May 19 Javascript
详解react-router如何实现按需加载
Jun 15 Javascript
js 开发之autocomplete="off"在chrom中失效的解决办法
Sep 28 Javascript
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
详解如何使用node.js的开发框架express创建一个web应用
Dec 20 Javascript
利用d3.js实现蜂巢图表带动画效果
Sep 03 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
Apr 07 #Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 #Javascript
Angular5给组件本身的标签添加样式class的方法
Apr 07 #Javascript
Vue实现内部组件轮播切换效果的示例代码
Apr 07 #Javascript
Javascript实现运算符重载详解
Apr 07 #Javascript
Vue中使用Sortable的示例代码
Apr 07 #Javascript
JavaScript实现简单动态进度条效果
Apr 06 #Javascript
You might like
要会喝咖啡也要会知道咖啡豆
2021/03/03 咖啡文化
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
php中动态变量用法实例
2015/06/10 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
$.format,jquery.format 使用说明
2011/07/13 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
Vue 2.x教程之基础API
2017/03/06 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
2017/08/02 Javascript
JS限制输入框输入的实现代码
2018/07/02 Javascript
element-ui中select组件绑定值改变,触发change事件方法
2018/08/24 Javascript
简单了解JavaScript中常见的反模式
2019/06/21 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
利用Python实现简单的相似图片搜索的教程
2015/04/23 Python
机器学习经典算法-logistic回归代码详解
2017/12/22 Python
python3处理含有中文的url方法
2018/05/10 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
PyCharm MySQL可视化Database配置过程图解
2020/06/09 Python
python 邮件检测工具mmpi的使用
2021/01/04 Python
即兴演讲稿
2014/01/04 职场文书
公司企业表扬信
2014/01/11 职场文书
少先队活动总结
2014/08/29 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
团委工作总结2015
2015/04/02 职场文书
幼师辞职信范文大全
2015/05/12 职场文书
python常见的占位符总结及用法
2021/07/02 Python