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中style属性
Oct 11 Javascript
javascript instanceof,typeof的区别
Mar 24 Javascript
很好用的js日历算法详细代码
Mar 07 Javascript
用jquery存取照片的具体实现方法
Jun 30 Javascript
jquery 利用show和hidden实现级联菜单示例代码
Aug 09 Javascript
JavaScript常用脚本汇总(三)
Mar 04 Javascript
javascript获取网页宽高方法汇总
Jul 19 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 Javascript
浅谈Vue render函数在ElementUi中的应用
Sep 06 Javascript
微信小程序网络请求实现过程解析
Nov 06 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 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 一个随机字符串生成代码
2010/05/26 PHP
yii框架中的Url生产问题小结
2012/01/16 PHP
thinkphp备份数据库的方法分享
2015/01/04 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
JavaScript中的Document文档对象
2008/01/16 Javascript
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
vue如何实现observer和watcher源码解析
2017/03/09 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
angular *Ngif else用法详解
2020/12/15 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
python集合用法实例分析
2015/05/30 Python
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
Python XML转Json之XML2Dict的使用方法
2019/01/15 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
python实现图片,视频人脸识别(dlib版)
2020/11/18 Python
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
婚礼主持结束词
2014/03/13 职场文书
聚美优品恶搞广告词
2014/03/14 职场文书
田径运动会通讯稿
2015/07/18 职场文书
公司食堂管理制度
2015/08/05 职场文书
《角的度量》教学反思
2016/02/18 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书
如何避免mysql启动时错误及sock文件作用分析
2022/01/22 MySQL