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 相关文章推荐
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
Nov 07 Javascript
我也种棵OO树JXTree[js+css+xml]
Apr 02 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
Mar 04 Javascript
javascript字母大小写转换的4个函数详解
May 09 Javascript
js简单倒计时实现代码
Apr 30 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 Javascript
关于网页中的无缝滚动的js代码
Jun 09 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
Vue.Js中的$watch()方法总结
Mar 23 Javascript
Angularjs上传图片实例详解
Aug 06 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
Jun 22 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
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文件上传判断file是否己选择上传文件的方法
2014/11/10 PHP
PHP中key和current,next的联合运用实例分析
2016/03/29 PHP
php实现三级级联下拉框
2016/04/17 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
PHP面向对象程序设计之对象生成方法详解
2016/12/02 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
PHP与以太坊交互详解
2018/08/24 PHP
实例:尽可能写友好的Javascript代码
2006/10/09 Javascript
jQuery选择器的工作原理和优化分析
2011/07/25 Javascript
JavaScript面向对象设计二 构造函数模式
2011/12/20 Javascript
Angularjs 基础入门
2014/12/26 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
2017/07/17 Javascript
js下拉菜单生成器dropMenu使用方法详解
2017/08/01 Javascript
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
jQuery选择器之属性筛选选择器用法详解
2017/09/19 jQuery
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
2018/02/01 Javascript
Postman模拟发送带token的请求方法
2018/03/31 Javascript
基于layui数据表格以及传数据的方式
2018/08/19 Javascript
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
Python解惑之整数比较详解
2017/04/24 Python
使用Python进行AES加密和解密的示例代码
2018/02/02 Python
python使用folium库绘制地图点击框
2018/09/21 Python
django如何自己创建一个中间件
2019/07/24 Python
Python将string转换到float的实例方法
2019/07/29 Python
python动态视频下载器的实现方法
2019/09/16 Python
Django choices下拉列表绑定实例
2020/03/13 Python
护士自我鉴定
2013/10/23 职场文书
搞笑获奖感言
2014/01/30 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书
2019年怎样写好导游词?
2019/07/02 职场文书
创业计划书之餐饮
2019/09/02 职场文书
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server
MySQL主从切换的超详细步骤
2022/06/28 MySQL