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 相关文章推荐
JS解密入门之凭直觉解
Jun 25 Javascript
javascript 必知必会之closure
Sep 21 Javascript
Javascript中的apply()方法浅析
Mar 15 Javascript
javascript+html5实现绘制圆环的方法
Jul 28 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
Aug 22 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
Jan 19 Javascript
漂亮实用的页面loading(加载)封装代码
Feb 03 Javascript
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
Angular.js中window.onload(),$(document).ready()的写法浅析
Sep 28 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
Aug 15 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 Javascript
JavaScript中document.activeELement焦点元素介绍
Nov 27 Javascript
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
PHP设计模式之命令模式的深入解析
2013/06/13 PHP
js跟随滚动条滚动浮动代码
2009/12/31 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
JS如何实现文本框随文本的长度而增长
2015/07/30 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
javascript如何实现暂停功能
2015/11/06 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
2016/10/25 Javascript
React Native 图片查看组件的方法
2018/03/01 Javascript
javaScript实现游戏倒计时功能
2018/11/17 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
2019/04/29 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
JS的时间格式化和时间戳转换函数示例详解
2020/07/27 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
python paramiko实现ssh远程访问的方法
2013/12/03 Python
Python 类与元类的深度挖掘 II【经验】
2016/05/06 Python
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
python对csv文件追加写入列的方法
2019/08/01 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
python输出数组中指定元素的所有索引示例
2019/12/06 Python
python跨文件使用全局变量的实现
2020/11/17 Python
python实现定时发送邮件
2020/12/23 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
全球虚拟主机商:HostGator
2017/02/06 全球购物
化工机械应届生求职信
2013/11/04 职场文书
班会关于环保演讲稿
2013/12/29 职场文书
人力资源部门的主要职能
2014/02/22 职场文书
商超业务员岗位职责
2014/03/12 职场文书
大学班级文化建设方案
2014/05/06 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
基层工作经验证明样本
2014/11/16 职场文书
2016优秀毕业生个人事迹材料
2016/02/29 职场文书
OpenCV-Python 实现两张图片自动拼接成全景图
2021/06/11 Python