JS使用iView的Dropdown实现一个右键菜单
JS使用iView的Dropdown实现一个右键菜单?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
成都创新互联专注于湖南企业网站建设,成都响应式网站建设公司,商城开发。湖南网站建设公司,为湖南等地区提供建站服务。全流程按需策划设计,专业设计,全程项目跟踪,成都创新互联专业和态度为您提供的服务
Dropdown的使用大概是这个样子
下拉菜单 驴打滚 炸酱面 豆汁儿 冰糖葫芦 北京烤鸭
发现有个触发元素slot,可以自定义的插入元素,我一想,只要把slot的内容设置为position: fixed,在右键的时候给它实时设置一下鼠标所在的位置不就行了嘛,然后一顿捣腾
驴打滚 炸酱面 豆汁儿 冰糖葫芦 北京烤鸭
看上去很不错,然后兴高采烈地一试,发现无论怎么点,菜单始终定位在右上角
slot的元素位置确实发生了变化,然而菜单位置始终不变化
这可把我折腾了半天,也没弄出个结果。抱着 极不情愿 一探究竟的心情,我打开了Dropdown的源码
可以看到标注的地方,slot的外层还有个div,而Dropdown的定位是依赖于外层的这个div的,所以无论你slot里的内容位置,在初始化之后再怎么变化,都不会影响到组件的位置了(也有可能是position: fixed的影响)
调整
发现slot外层的div有一个ref="reference"
的属性
突然有了想法,我是不是可以直接通过Dropdown的refs直接把整个外层div替换掉,于是继续捣腾,改造了一下
驴打滚 炸酱面 豆汁儿 冰糖葫芦 北京烤鸭
看完上述内容,你们掌握JS使用iView的Dropdown实现一个右键菜单的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
当前文章:JS使用iView的Dropdown实现一个右键菜单
转载来源:http://myzitong.com/article/jdjdip.html