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 相关文章推荐
JXTree对象,读取外部xml文件数据,生成树的函数
Apr 02 Javascript
JS获取并操作iframe中元素的方法
Mar 21 Javascript
浏览器的JavaScript引擎的识别方法
Oct 20 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 Javascript
jQuery表格插件datatables用法总结
Sep 05 Javascript
javascript简单实现滑动菜单效果的方法
Jul 27 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 Javascript
浅谈jQuery hover(over, out)事件函数
Dec 03 Javascript
bootstrap模态框实现拖拽效果
Dec 14 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 Javascript
layui--select使用以及下拉框实现键盘选择的例子
Sep 24 Javascript
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
详解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
PHP缓存技术的多种方法小结
2012/08/14 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
php实现的简单检验登陆类
2015/06/18 PHP
PHP MVC框架skymvc支持多文件上传
2016/05/26 PHP
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
深入理解JavaScript定时机制
2010/10/29 Javascript
随窗体滑动的小插件sticky源码
2013/06/21 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
javascript结合canvas实现图片旋转效果
2015/05/03 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
js变量提升深入理解
2016/09/16 Javascript
详解js树形控件—zTree使用总结
2016/12/28 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
JavaScript中双符号的运算详解
2017/03/12 Javascript
详解Node中导入模块require和import的区别
2017/08/11 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
2019/04/02 Javascript
Vue.js中该如何自己维护路由跳转记录
2019/05/19 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
2019/08/27 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
Scrapy的简单使用教程
2017/10/24 Python
python爬虫 urllib模块反爬虫机制UA详解
2019/08/20 Python
python中什么是面向对象
2020/06/11 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
python实现代码审查自动回复消息
2021/02/01 Python
Cotton On美国网站:澳洲时装连锁品牌
2016/10/25 全球购物
手机配件第一品牌:ZAGG
2017/05/28 全球购物
现代绅士日常奢侈品:Todd Snyder
2019/12/13 全球购物
建龙钢铁面试总结
2014/04/15 面试题
英文版网络工程师求职信
2013/10/28 职场文书
通用求职信范文模板分享
2013/12/27 职场文书
公积金具结保证书
2015/05/11 职场文书
2016年学校党支部公开承诺书
2016/03/25 职场文书
php双向队列实例讲解
2021/11/17 PHP