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/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
Nov 25 Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
Oct 26 Javascript
详解JS中的立即执行函数
Feb 24 Javascript
easyui combogrid实现本地模糊搜索过滤多列
May 13 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
May 28 Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 Javascript
Vue实现搜索结果高亮显示关键字
May 28 Javascript
layui复选框的全选与取消实现方法
Sep 02 Javascript
Vue实现简单计算器案例
Feb 25 Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 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
多文件上传的例子
2006/10/09 PHP
php socket方式提交的post详解
2008/07/19 PHP
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
php基于Snoopy解析网页html的方法
2015/07/09 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
IE下JS读取xml文件示例代码
2013/08/05 Javascript
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
node.js中 stream使用教程
2016/08/28 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
jquery自定义显示消息数量
2017/12/19 jQuery
Vue.js 时间转换代码及时间戳转时间字符串
2018/10/16 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
element ui分页多选,翻页记忆的实例
2019/09/03 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
js实现计算器功能
2020/08/10 Javascript
[52:00]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs Optic
2018/04/02 DOTA
python实现在字符串中查找子字符串的方法
2015/07/11 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
python数值基础知识浅析
2019/11/19 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
python如何进行矩阵运算
2020/06/05 Python
古驰英国官网:GUCCI英国
2020/03/07 全球购物
寄语是什么意思
2014/04/10 职场文书
开学随笔
2015/08/15 职场文书
领导干部学习心得体会
2016/01/23 职场文书
导游词之重庆渣滓洞
2020/01/08 职场文书
详解MySQL的半同步
2021/04/22 MySQL
一文读懂navicat for mysql基础知识
2021/05/31 MySQL
MySQL千万级数据表的优化实战记录
2021/08/04 MySQL