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 设计模式 富有表现力的Javascript(一)
May 26 Javascript
深入解析contentWindow, contentDocument
Jul 04 Javascript
node.js中的fs.readSync方法使用说明
Dec 17 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
Dec 03 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
Jan 19 Javascript
原生JS中slice()方法和splice()区别
Mar 06 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
微信小程序的部署方法步骤
Sep 04 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
Sep 28 Javascript
react+ant design实现Table的增、删、改的示例代码
Dec 27 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
Apr 24 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中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
linux系统上支持php的 iconv()函数的方法
2011/10/01 PHP
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
Yii学习总结之安装配置
2015/02/22 PHP
php设计模式之装饰模式应用案例详解
2019/06/17 PHP
网上应用的一个不错common.js脚本
2007/08/08 Javascript
Javascript面向对象编程
2012/03/18 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
open 动态修改img的onclick事件示例代码
2013/11/13 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
jquery实现的代替传统checkbox样式插件
2015/06/19 Javascript
css如何让浮动元素水平居中
2015/08/07 Javascript
12个非常有用的JavaScript技巧
2017/05/17 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
解决layui下拉框监听问题(监听不到值的变化)
2019/09/28 Javascript
Python格式化css文件的方法
2015/03/10 Python
优化Python代码使其加快作用域内的查找
2015/03/30 Python
如何用python写一个简单的词法分析器
2018/12/18 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
python3 map函数和filter函数详解
2019/08/26 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
巴西家用小家电购物网站:Polishop
2016/08/07 全球购物
澳大利亚拥有最佳跳伞降落点和最好服务的跳伞项目运营商:Skydive Australia
2018/03/05 全球购物
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
ETO男装官方网店:ETO Jeans
2019/02/28 全球购物
巴西网上药店:Drogaria Araujo
2021/01/06 全球购物
什么是反射?如何实现反射?
2016/07/25 面试题
幼儿园保育员辞职信
2014/01/12 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
2014年大学宣传部工作总结
2014/12/19 职场文书
出租车拒载检讨书
2015/01/28 职场文书
《七律·长征》教学反思
2016/02/16 职场文书
导游词之安徽九华山
2019/09/18 职场文书
python异常中else的实例用法
2021/06/15 Python
实现一个简单得数据响应系统
2021/11/11 Javascript
JS轻量级函数式编程实现XDM二
2022/06/16 Javascript