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 相关文章推荐
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
Sep 03 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
Apr 14 Javascript
简单的js表单验证函数
Oct 28 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 Javascript
javascript验证邮件地址和MX记录的方法
Jun 16 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
java实现单链表增删改查的实例代码详解
Aug 30 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
Mar 08 Javascript
OpenLayers3实现对地图的基本操作
Sep 28 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 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函数和split函数的区别小结
2016/08/24 PHP
PHP自定义函数实现数组比较功能示例
2017/10/19 PHP
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
JavaScript获取XML数据附示例截图
2014/03/05 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
Angular路由简单学习
2016/12/26 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
2017/01/05 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
Vue2递归组件实现树形菜单
2017/04/10 Javascript
Angular4学习之Angular CLI的安装与使用教程
2018/01/04 Javascript
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
读懂CommonJS的模块加载
2019/04/19 Javascript
vue实现PC端分辨率适配操作
2020/08/03 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
[09:37]2018DOTA2国际邀请赛寻真——不懈追梦的Team Serenity
2018/08/13 DOTA
python绘制多个曲线的折线图
2020/03/23 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
浅谈python元素如何去重,去重后如何保持原来元素的顺序不变
2020/02/28 Python
Django models文件模型变更错误解决
2020/05/11 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
澳大利亚最大的网上油画销售画廊:Direct Art Australia
2018/04/15 全球购物
英国在线药房:Chemist.co.uk
2019/03/26 全球购物
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
C/C++ 笔试、面试题目大汇总
2015/11/21 面试题
生产现场工艺工程师岗位职责
2013/11/28 职场文书
中学教师教育感言
2014/02/21 职场文书
离婚承诺书格式范文
2015/05/04 职场文书
追讨欠款律师函
2015/05/27 职场文书
分析Netty直接内存原理及应用
2021/06/14 Java/Android