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入门—数据删除与隔行变色以及图片预览
Jan 07 Javascript
javascript打印大全(打印页面设置/打印预览代码)
Mar 29 Javascript
from表单多个按钮提交用onclick跳转不同action
Apr 24 Javascript
JavaScript 学习笔记之语句
Jan 14 Javascript
jquery中$each()方法的使用指南
Apr 30 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
May 01 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
May 30 Javascript
sea.js常用的api简易文档
Nov 15 Javascript
深入剖析Node.js cluster模块
May 23 Javascript
layui table 列宽百分比显示的实现方法
Sep 28 Javascript
vue-cli设置publicPath小记
Apr 14 Javascript
详解JavaScript执行模型
Nov 16 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 利用socket发送HTTP请求(GET,POST)
2015/08/24 PHP
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
Js 中debug方式
2010/02/07 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
2012/07/31 Javascript
javascript使用定时函数实现跳转到某个页面
2013/12/25 Javascript
JQuery中使用ajax传输超大数据的解决方法
2014/07/14 Javascript
什么是JavaScript中的结果值?
2016/10/08 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
2017/05/10 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
微信小程序数据存储与取值详解
2018/01/30 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
2018/08/08 Javascript
layer ui 导入文件之前传入数据的实例
2019/09/23 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
Python 爬虫图片简单实现
2017/06/01 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
Numpy之reshape()使用详解
2019/12/26 Python
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
HTML5 CSS3给网站设计带来出色效果
2009/07/16 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
2018/06/13 HTML / CSS
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
门卫工作岗位职责
2013/12/17 职场文书
污水厂厂长岗位职责
2014/01/04 职场文书
旷课检讨书3000字
2014/02/04 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
党的群众路线教育实践活动党员个人整改措施
2014/10/27 职场文书
商务考察邀请函模板
2015/02/02 职场文书
就业推荐表院系意见
2015/06/05 职场文书
领导视察通讯稿
2015/07/18 职场文书
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android