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

JS使用iView的Dropdown实现一个右键菜单?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

成都创新互联专注于湖南企业网站建设,成都响应式网站建设公司,商城开发。湖南网站建设公司,为湖南等地区提供建站服务。全流程按需策划设计,专业设计,全程项目跟踪,成都创新互联专业和态度为您提供的服务

Dropdown的使用大概是这个样子


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


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

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

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

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

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


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

调整

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

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


看完上述内容,你们掌握JS使用iView的Dropdown实现一个右键菜单的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


名称栏目:JS使用iView的Dropdown实现一个右键菜单
分享链接:http://ybzwz.com/article/jdjdip.html