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(下拉菜单)实现的右键菜单 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要为大家详细介绍了如何使用JavaScript监视有没有被刷新后跳转其他页面,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下2025-01-01
这篇文章主要介绍了基于Electron实现桌面应用开发代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
TypeScript是JavaScript的超集,具有类型系统,支持ES6语法,支持面向对象编程的概念,下面这篇文章主要给大家介绍了关于TypeScript应该尽量避免的语法,需要的朋友可以参考下2022-04-04
下面小编就为大家带来一篇老生常谈JavaScript 正则表达式语法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要为大家详细介绍了js倒计时效果的实现代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
前端接口报错Required request body is missing解决办法
这篇文章主要给大家介绍了关于前端接口报错Required request body is missing的解决办法,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-12-12
去除数组重复值的方法有很多，本文整理了四种不同方式，在此与大家分享下，希望对大家有所帮助2013-09-09
解决uni-app微信小程序input输入框在底部时,键盘弹起页面整体上移问题
问题是这样的input 获取焦点时会自动调起手机键盘，设置 :adjust-position="true"，会导致键盘弹起时页面整体上移，这篇文章主要介绍了解决uni-app微信小程序input输入框在底部时，键盘弹起页面整体上移问题,，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了微信公众号H5支付接口调用方法，微信内H5调用支付接口代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-01-01
这篇文章主要介绍了JS返回只包含数字类型的数组实现方法,结合实例形式分析了循环遍历数组及正则匹配两种实现技巧,需要的朋友可以参考下2016-12-12
最新评论