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 相关文章推荐
一个javascript参数的小问题
Mar 02 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
Sep 01 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
深入浅析JavaScript中的Function类型
Jul 09 Javascript
基于JavaScript实现的快速排序算法分析
Apr 14 Javascript
ES6新特性七:数组的扩充详解
Apr 21 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
May 31 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
Dec 26 Javascript
ES6 Object方法扩展的应用实例分析
Jun 25 Javascript
完美解决通过IP地址访问VUE项目的问题
Jul 18 Javascript
React冒泡和阻止冒泡的应用详解
Aug 18 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 self,$this,const,static,->的使用
2009/10/22 PHP
php强制下载类型的实现代码
2011/04/21 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
重载toString实现JS HashMap分析
2011/03/13 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
2012/04/12 Javascript
javascript 实现简单的table排序及table操作练习
2012/12/28 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
javascript ajax 仿百度分页函数
2013/10/29 Javascript
node.js中的buffer.toString方法使用说明
2014/12/14 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
JavaScript Window浏览器对象模型原理解析
2020/05/30 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
python计算时间差的方法
2015/05/20 Python
Python实现配置文件备份的方法
2015/07/30 Python
听歌识曲--用python实现一个音乐检索器的功能
2016/11/15 Python
用python处理图片之打开\显示\保存图像的方法
2018/05/04 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
HTML5地理定位实例
2014/10/15 HTML / CSS
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
C语言如何决定使用那种整数类型
2016/11/26 面试题
护士自我鉴定
2013/10/23 职场文书
物业门卫岗位职责
2013/12/28 职场文书
婚前协议书怎么写
2014/04/15 职场文书
大学毕业生求职自荐书
2014/06/05 职场文书
竞赛口号大全
2014/06/16 职场文书
文案策划专业自荐信
2014/07/07 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
2021/10/05 Javascript