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 相关文章推荐
不错的新闻标题颜色效果
Dec 10 Javascript
一个对于js this关键字的问题
Jan 09 Javascript
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 Javascript
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
Extjs Gird 支持中文拼音排序实现代码
Apr 15 Javascript
form表单action提交的js部分与html部分
Jan 07 Javascript
JS操作COOKIE实现备忘记录的方法
Apr 01 Javascript
微信小程序  简单实例(阅读器)的实例开发
Sep 29 Javascript
react-native-fs实现文件下载、文本存储的示例代码
Sep 22 Javascript
移动前端图片压缩上传的实例
Dec 06 Javascript
Angular 向组件传递模板的两种方法
Feb 23 Javascript
JavaScript满天星导航栏实现方法
Mar 08 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中file_exists函数不支持中文名的解决方法
2014/07/26 PHP
PHP获取youku视频真实flv文件地址的方法
2014/12/23 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
jQuery 全选效果实现代码
2009/03/23 Javascript
JQuery onload、ready概念介绍及使用方法
2013/04/27 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
AngularJS实现注册表单验证功能
2017/10/16 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
javascript实现电商放大镜效果
2020/11/23 Javascript
[53:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第三场 1月18日
2021/03/11 DOTA
跟老齐学Python之从if开始语句的征程
2014/09/14 Python
深入浅出分析Python装饰器用法
2017/07/28 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
Django在admin后台集成TinyMCE富文本编辑器的例子
2019/08/09 Python
解决python 上传图片限制格式问题
2019/10/30 Python
解决运行出现'dict' object has no attribute 'has_key'问题
2020/07/15 Python
python 图像增强算法实现详解
2021/01/24 Python
纯CSS3实现扇形动画菜单(简化版)实例源码
2017/01/17 HTML / CSS
美国男士内衣品牌:Tommy John
2017/12/22 全球购物
波兰购物网站:MALL.PL
2019/05/01 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
优秀广告词大全
2014/03/19 职场文书
电子商务专业求职信
2014/07/10 职场文书
最美护士演讲稿
2014/08/27 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP
MySQL查询日期时间
2022/05/15 MySQL
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android