iview通过Dropdown(下拉菜单)实现的右键菜单


Posted in Javascript onOctober 26, 2018

官方目前不提供右键菜单,这里借助Dropdown(下拉菜单)来实现,故为“官方“。

既然Dropdown有类似功能,如果将其文字隐藏,并且在合适时机弹出,便可实现,其自身就是iview中一个组件,不言而喻,功能强大、简洁。

源码之下,了无秘密,简单陈述下思路,在模板中正常使用Dropdown组件,属性、样式需要单独设置(style="display:none" trigger="click"),即默认不显示,click触发,右键按下时首先设置其可见,在更改reference对象引用即可。

模板如下

iview通过Dropdown(下拉菜单)实现的右键菜单

逻辑如下:

iview通过Dropdown(下拉菜单)实现的右键菜单

源码跟踪:

一。标签a不可见,原本以为只要改变left top,菜单会自动跟随,其位置是通过调用元素的getBoundingClientRect来获取,因标签不可见,拿到都是0,此路不通,pass;

二。也可以改变标签的z-index顺序,使其在目标节点之下,这里动态改变其引用节点来实现。

理论上任何组件都可实现右键菜单。

总结

以上所述是小编给大家介绍的iview通过Dropdown(下拉菜单)实现的右键菜单 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
Jun 02 Javascript
javascript定时变换图片实例代码
Mar 17 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
Node.js开发之访问Redis数据库教程
Jan 14 Javascript
javascript中DOM复选框选择用法实例
May 14 Javascript
初步认识JavaScript函数库jQuery
Jun 18 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
Nov 02 Javascript
浅析node连接数据库(express+mysql)
Nov 30 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
Nov 22 Javascript
Postman模拟发送带token的请求方法
Mar 31 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
Javascript中弹窗confirm与prompt的区别
Oct 26 #Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 #Javascript
如何用Node写页面爬虫的工具集
Oct 26 #Javascript
Javascript中绑定click事件的四种方式介绍
Oct 26 #Javascript
使用webpack打包后的vue项目如何正确运行(express)
Oct 26 #Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 #jQuery
详解ES6 系列之异步处理实战
Oct 26 #Javascript
You might like
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
php中定义网站根目录的常用方法
2010/08/08 PHP
php在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
javascript 节点遍历函数
2010/03/28 Javascript
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
javascript实现checkbox复选框实例代码
2016/01/10 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
mpvue全局引入sass文件的方法步骤
2019/03/06 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
使用paramiko远程执行命令、下发文件的实例
2017/10/01 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
python判断变量是否为int、字符串、列表、元组、字典的方法详解
2020/02/13 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
opencv 查找连通区域 最大面积实例
2020/06/04 Python
WiFi云数码相框:Nixplay
2018/07/05 全球购物
中文专业毕业生自荐信
2013/10/28 职场文书
土木工程专业个人求职信
2013/12/30 职场文书
记者岗位职责
2014/01/06 职场文书
2014政务公开实施方案
2014/02/19 职场文书
2014年服务行业工作总结
2014/11/18 职场文书
2014年教学管理工作总结
2014/12/02 职场文书
写给老师的感谢信
2015/01/20 职场文书
小学教师个人总结
2015/02/05 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python