iview“官方“实现的右键菜单
2024-08-29 01:50:22
博客开篇,没想到第一篇博文竟然是前端的,虽略显尴尬,但正能量溢出,你我可能遇到同样问题,在这里分享下个人方案,希望对你有用。
官方目前不提供右键菜单,这里借助Dropdown(下拉菜单)来实现,故为“官方“。
既然Dropdown有类似功能,如果将其文字隐藏,并且在合适时机弹出,便可实现,其自身就是iview中一个组件,不言而喻,功能强大、简洁。
源码之下,了无秘密,简单陈述下思路,在模板中正常使用Dropdown组件,属性、样式需要单独设置(style="display:none" trigger="click"),即默认不显示,click触发,右键按下时首先设置其可见,在更改reference对象引用即可。
模板如下
逻辑如下:
截图效果:
源码跟踪:
一。标签a不可见,原本以为只要改变left top,菜单会自动跟随,其位置是通过调用元素的getBoundingClientRect来获取,因标签不可见,拿到都是0,此路不通,pass;
二。也可以改变标签的z-index顺序,使其在目标节点之下,这里动态改变其引用节点来实现。
理论上任何组件都可实现右键菜单。
最新文章
- js加载完所有的图片,适合电子相册哦~~~~
- jekyll 安装过程
- mvc理念和thinkphp的语法特征 thinkphp引入模板
- PHP Header 缓存 --- Header 参数说明
- When to use Class.isInstance() &; when to use instanceof operator?
- 开发环境配置--Ubuntu+Qt4+OpenCV(三)
- Webx框架:Valve详细解释
- MVC模型注解
- saltstack高效运维
- Maven项目pom.xml文件简单解析
- centos 6.5下安装nmap工具及简单用法
- 201621123008 《Java程序设计》第十周学习总结
- VMware ESXi 配置小结
- RequestDispatcher.forward转发与HttpServletResponse.sendRedirect重定向
- Customize WCF Envelope and Namespace Prefix
- 【代码审计】QYKCMS_v4.3.2 任意文件上传漏洞分析
- C++之函数模板
- 【POJ1509】Glass Beads 【后缀自动机】
- 《大数据日知录》读书笔记-ch15机器学习:范型与架构
- 通过Field (反射)给私有字段赋值
热门文章
- js中createlement和creatTextnode属性
- 简单脱壳教程笔记(7)---手脱PECompact2.X壳
- 51Nod 1522 上下序列 —— 区间DP
- Java IO 字节流与字符流 (二)
- git删除远程分支和本地分支以及更改本地和分支名字
- IDEA kafka producer数据输出缓慢 和 kafka consumer 报错的处理
- 一张图带你了解-常见面试之JUC包详解
- 课后题--------求分子量-----Molar mass------
- 从 C++ 到 Objective-C 的快速指南
- can't set blob value on that column