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 动态调整图片尺寸实现代码
Dec 28 Javascript
查找iframe里元素的方法可传参
Sep 11 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
node.js中的fs.rmdir方法使用说明
Dec 16 Javascript
基于jquery实现智能表单验证操作
May 09 Javascript
微信小程序  Mustache语法详细介绍
Oct 27 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
Dec 13 Javascript
vue router的基本使用和配置教程
Nov 05 Javascript
详解vue中使用微信jssdk
Apr 19 Javascript
JS实现秒杀倒计时特效
Jan 02 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 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
一个ftp类(ini.php)
2006/10/09 PHP
PHP 开发环境配置(Zend Server安装)
2010/04/28 PHP
jQuery 位置插件
2008/12/25 Javascript
js浮动图片的动态效果
2013/07/10 Javascript
通过action传过来的值在option获取进行验证的方法
2013/11/14 Javascript
jQuery响应enter键的实现思路
2014/04/18 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
javascript定时器完整实例
2015/02/10 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
2015/09/09 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
2016/03/22 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python matlibplot绘制3D图形
2018/07/02 Python
Python pandas自定义函数的使用方法示例
2019/11/20 Python
python中sort sorted reverse reversed函数的区别说明
2020/05/11 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
网络体系结构及协议的定义
2014/03/13 面试题
农行实习自我鉴定
2013/09/22 职场文书
八一建军节部队活动方案
2014/02/04 职场文书
金融事务专业求职信
2014/04/25 职场文书
部门年终奖分配方案
2014/05/07 职场文书
公司承诺书范文
2014/05/19 职场文书
公司口号大全
2014/06/11 职场文书
水利水电建筑施工应届生求职信
2014/07/04 职场文书
导游词之河北邯郸
2019/09/12 职场文书
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库