使用iView的Dropdown实现一个右键菜单

sihai 发布于2019-08-23 17:17 / 3386人阅读

摘要：前言前段时间在用做个项目，其中需要使用自定义的右键菜单，然后去官网找了一下，发现有个的组件，便想着能不能用来做个右键菜单的组件你可能需要对有一定的使用经验尝试的使用大概是这个样子下拉菜单驴打滚炸酱面豆汁儿冰糖葫芦北京烤鸭发现有个触发元素

前言

前段时间在用iView做个项目，其中需要使用自定义的右键菜单，然后去官网找了一下，发现有个Dropdown的组件，便想着能不能用来做个右键菜单的组件

你可能需要对iView有一定的使用经验

尝试

Dropdown的使用大概是这个样子

发现有个触发元素slot，可以自定义的插入元素，我一想，只要把slot的内容设置为position: fixed，在右键的时候给它实时设置一下鼠标所在的位置不就行了嘛，然后一顿捣腾

看上去很不错，然后兴高采烈地一试，发现无论怎么点，菜单始终定位在右上角

slot的元素位置确实发生了变化，然而菜单位置始终不变化

这可把我折腾了半天，也没弄出个结果。抱着 ~~极不情愿~~ 一探究竟的心情，我打开了Dropdown的源码

可以看到标注的地方，slot的外层还有个div，而Dropdown的定位是依赖于外层的这个div的，所以无论你slot里的内容位置，在初始化之后再怎么变化，都不会影响到组件的位置了（也有可能是position: fixed的影响）

调整

发现slot外层的div有一个ref="reference"的属性

突然有了想法，我是不是可以直接通过Dropdown的refs直接把整个外层div替换掉，于是继续捣腾，改造了一下

根据鼠标的位置实时创建一个position: fixed的div，通过给Dropdown添加ref属性，获取到Dropdown对象之后再通过$ref属性将div赋值到reference

大功告成，现在Dropdown会根据鼠标所在的位置出现啦

最后把一些点击的回调方法补全，就是一个像样的右键菜单组件了

当然作为一个可以复用的组件，还需要把一些通用逻辑再提取出来，以及补全一些常用的API，具体代码可以参考这个仓库

服务器托管云服务器右键菜单右键菜单类 jquery右键菜单 js右键菜单

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104118.html

HeyUI组件库按需加载功能上线，盘点HeyUI组件库有哪些独特功能？

摘要：测试复制至剪切板的文本测试相关文档复制剪切板滚动至视图内其实，这是一个非常方便的功能，比如说，分页加载后滚动至头部，切换页面时切换至头部。HeyUI组件库如果你还不了解heyui组件库，欢迎来我们的官网或者github参观。官网 github 当然，如果能给我们一颗✨✨✨，那是最赞的了！按需加载当heyui组件库的组件越来越多的时候，按需加载的功能终于上线了。话不多说，先把按需...

IamDLY 2019-05-22 19:08 评论0 收藏0
iView 发布 3.0 版本，以及开发者社区等 5 款新产品

摘要：相对时间组件锚点组件面板分割组件分割线组件单元格组件相对时间组件用于表示几分钟前几小时前等相对于此时此刻的时间描述。单元格组件在手机上比较常见，在上则常用于固定的侧边菜单项。开发者社区这是发布会最劲爆的一款产品了。 showImg(https://segmentfault.com/img/bVbeuj6?w=2864&h=1458); 7 月 28 日，我们成功地召开了 iView 3...

FreeZinG 2019-08-23 10:31 评论0 收藏0
Vue 2.x 实战之后台管理系统开发（一）

摘要：导语下文实战之后台管理系统开发二该文章将从头到尾梳理我是如何使用开发一个后台管理项目的，我会将自己遇到的问题贴出，希望可以帮助到其他人。构建项目框架准备对于大陆用户，建议将的注册表源设置为国内的镜像，如淘宝镜像，可以大幅提升安装速度。 1. 导语下文：Vue 2.x 实战之后台管理系统开发（二）该文章将从头到尾梳理我是如何使用 Vue 2 开发一个后台管理项目的，我会将自己遇到的问...

darkbaby123 2019-08-20 16:49 评论0 收藏0
iView2 来了，全面支持 Vue.js 2.x

摘要：来了两个星期的紧张开发，终于发布了支持的版本。整体性能也大幅度提升。报名费用元，报名地址微信扫描二维码更新日志目前已发布至，文档还需一段时间，但很快会发布新版本的来支持。 showImg(https://segmentfault.com/img/remote/1460000008640063?w=1600&h=900); iView2 来了两个星期的紧张开发，iView 终于发布了支...

YFan 2019-08-21 11:34 评论0 收藏0
Bootstrap Mega Menu

摘要：完整的代码放在。鼠标事件组件通过点击打开菜单，不符合大菜单场景，需要修改成，鼠标移入时打开菜单，鼠标移出时关闭菜单。鼠标移入时，显示菜单。自适应屏幕宽度当屏幕尺寸小于像素时，菜单会自动折叠，恢复默认行为，通过点击来打开菜单。完整的代码放在 jsFiddle Bootstrap Mega Menu 。我们管 Mega Menu 叫做大菜单吧，巨、超级啥的，不足以彰显我们的草根贵气。 ...

booster 2019-08-21 17:19 评论0 收藏0