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实现简单的Canvas画图实例
Jul 04 Javascript
使用text方法获取Html元素文本信息示例
Sep 01 Javascript
JS实现的网页倒计时数字时钟效果
Mar 02 Javascript
AngularJS向后端ASP.NET API控制器上传文件
Feb 03 Javascript
JavaScript中两个字符串的匹配
Jun 08 Javascript
node.js ws模块搭建websocket服务端的方法示例
Apr 25 Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 Javascript
Node.js API详解之 net模块实例分析
May 18 Javascript
vue实现页面切换滑动效果
Jun 29 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
Jul 20 Javascript
JavaScript实现下拉列表
Jan 20 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 number_format() 函数定义和用法
2012/06/01 PHP
php生成二维码
2015/08/10 PHP
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
JS图片无缝、平滑滚动代码
2014/03/11 Javascript
多个$(document).ready()的执行顺序实例分析
2014/07/26 Javascript
javascript跨域总结之window.name实现的跨域数据传输
2015/11/01 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
学习javascript文件加载优化
2016/02/19 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
Vue.js动态组件解析
2016/09/09 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
[01:35]辉夜杯战队访谈宣传片—LGD
2015/12/25 DOTA
Python之Web框架Django项目搭建全过程
2017/05/02 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
PHP实现发送和接收JSON请求
2018/06/07 Python
python 解压pkl文件的方法
2018/10/25 Python
python 实现UTC时间加减的方法
2018/12/31 Python
Python字典的基本用法实例分析【创建、增加、获取、修改、删除】
2019/03/05 Python
谈谈Python中的while循环语句
2019/03/10 Python
python实现猜拳小游戏
2020/04/05 Python
详解有关PyCharm安装库失败的问题的解决方法
2020/02/02 Python
运行tensorflow python程序,限制对GPU和CPU的占用操作
2020/02/06 Python
openCV提取图像中的矩形区域
2020/07/21 Python
Python Selenium自动化获取页面信息的方法
2020/08/31 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
歌唱比赛主持词
2014/03/18 职场文书
园林设计专业毕业生求职信
2014/03/23 职场文书
高中团支书竞选稿
2015/11/21 职场文书
关于Oracle12C默认用户名system密码不正确的解决方案
2021/10/16 Oracle