iview通过Dropdown(下拉菜单)实现的右键菜单
更新时间：2018年10月26日 14:18:37 作者：听风者
这篇文章主要介绍了iview通过Dropdown(下拉菜单)实现的右键菜单 ,需要的朋友可以参考下
官方目前不提供右键菜单，这里借助Dropdown（下拉菜单）来实现，故为“官方“。
既然Dropdown有类似功能，如果将其文字隐藏，并且在合适时机弹出，便可实现，其自身就是iview中一个组件，不言而喻，功能强大、简洁。
源码之下，了无秘密，简单陈述下思路，在模板中正常使用Dropdown组件，属性、样式需要单独设置（style="display:none" trigger="click"），即默认不显示，click触发，右键按下时首先设置其可见，在更改reference对象引用即可。
模板如下
逻辑如下：
源码跟踪：
一。标签a不可见，原本以为只要改变left top，菜单会自动跟随，其位置是通过调用元素的getBoundingClientRect来获取，因标签不可见，拿到都是0，此路不通，pass;
二。也可以改变标签的z-index顺序，使其在目标节点之下，这里动态改变其引用节点来实现。
理论上任何组件都可实现右键菜单。
总结
以上所述是小编给大家介绍的iview通过Dropdown(下拉菜单)实现的右键菜单 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
在js中通过window.location.href控制页面跳转时，有时会跳转至缓存页面，并没有真正去请求要跳转的地址，导致页面数据未能及时加载刷新。怎么解决呢？下面小编给大家解答下2016-10-10
在JavaScript中，数据类型的转换是一项常见的任务，不同的数据类型之间需要相互转换以满足程序的需求，本篇博客将深入探讨JavaScript中的数据类型转换，包括隐式转换和显式转换的概念、转换规则和常见的数据类型转换示例2023-06-06
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
今天小编就为大家分享一篇关于js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
这篇文章主要介绍了详解uniapp的全局变量实现方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
使用JSX 建立 Markup 组件风格开发的示例（前端组件化）
这篇文章主要介绍了使用JSX 建立 Markup 组件风格开发的示例（前端组件化）本文重点讲解如何从0搭建一个组件系统，在这里我们会学习使用JSX来建立markup 的风格，我们基于与React 一样的 JSX 去建立我们组件的风格2021-04-04
这篇文章主要介绍了JS动态修改iframe高度和宽度的方法,实例分析了javascript操作iframe属性的技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
同C# 、Java一样我们可以手工调用垃圾回收程序，但是由于其消耗大量资源，而且我们手工调用的不会比浏览器判断的准确，所以不推荐手工调用垃圾回收2013-10-10
用下面的方法可以调用iframe中的函数，实现一些比较特殊的效果，不过能跨域的。2009-07-07
其实空格有两个，一个ASCII编号是32，另一个是ASCII编号是160.后者是unicode编码。以前写一个贴子ie6下准确判断空格还以是IE6不能正确判断空格。2009-11-11
JavaScript之promise_动力节点Java学院整理
这篇文章主要为大家详细介绍了JavaScript之promise的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
最新评论