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实现不断闪烁文字的方法
May 15 Javascript
javascript实现动态导入js与css等静态资源文件的方法
Jul 25 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
Mar 01 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
AngularJS入门教程之Helloworld示例
Dec 25 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 Javascript
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
JavaScript html5 canvas实现图片上画超链接
Oct 20 Javascript
详解webpack模块化管理和打包工具
Apr 21 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
Sep 14 Javascript
微信小程序纯文本实现@功能
Apr 08 Javascript
JavaScript的function函数详细介绍
Nov 20 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
ADODB类使用
2006/11/25 PHP
php中header跳转使用include包含解决参数丢失问题
2015/05/08 PHP
实例讲解yii2.0在php命令行中运行的步骤
2015/12/01 PHP
onpropertypchange
2006/07/01 Javascript
由浅到深了解JavaScript类
2006/09/08 Javascript
jquery 选项卡效果 新手代码
2011/07/08 Javascript
JS模拟面向对象全解(二、类型与赋值)
2011/07/13 Javascript
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
JS下载文件|无刷新下载文件示例代码
2014/04/17 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
2020/08/21 Javascript
js判断文件格式及大小的简单实例(必看)
2016/10/11 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
2016/10/19 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
2017/09/30 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
layui实现二维码弹窗、并下载到本地的方法
2019/09/25 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
老生常谈进程线程协程那些事儿
2017/07/24 Python
python操作列表的函数使用代码详解
2017/12/28 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
python读取excel进行遍历/xlrd模块操作
2020/07/12 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
长曲棍球装备:Lacrosse Monkey
2020/12/02 全球购物
领导四风问题整改措施思想汇报
2014/10/13 职场文书
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL
搞笑Gif:这么白这么长的腿像极了一楼的女朋友
2022/03/21 杂记