JS使用接口的下拉式实现一个右键菜单

前言

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

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

尝试

下拉式的使用大概是这个样子

模板下拉列表a href=' JavaScript : void(0)' rel='外部无跟随'下拉菜单图标类型=' IOs-向下箭头'/图标/下拉菜单插槽='列表'下拉菜单项驴打滚/DropdownItem DropdownItem炸酱面/DropdownItem DropdownItem已禁用豆汁儿/DropdownItem DropdownItem冰糖葫芦/DropdownItem DropdownItem已分割北京烤鸭/DropDownItem/DropDownMenu/DropDown/模板脚本导出默认{ }/脚本发现有个触发元素插槽，可以自定义的插入元素，我一想，只要把狭槽的内容设置为位置：固定，在右键的时候给它实时设置一下鼠标所在的位置不就行了嘛，然后一顿捣腾

模板下拉转移放置='右开始'触发器='自定义： visible=' currentVisible ' @ on-click out=' handleCancel ' div : style=' locator style '/div dropbowmenu slot=' list ' dropbowitem驴打滚/DropdownItem DropdownItem炸酱面/DropdownItem DropdownItem已禁用豆汁儿/DropdownItem DropdownItem冰糖葫芦/DropdownItem DropdownItem已分割北京烤鸭/DropDownItem/DropDownMenu/DropDownMenu/模板脚本导出默认值{ data(){ return { poss x : 0 0 0，poss : 0 0 0，currentVisible: false } }，计算值： { locator style(){ return { position : ' fixed '，left: `${this.posX}px `，top 3: ` `{ this . POSy } px ` } } }，methods: {POSx=CLIENT x if(this。波西！==clientY)这个。posy=clientY这个。currentvisible=true } }，handleCancel(){ this。currentvisible=false } }，已挂载(){ document。addeventlistener('上下文菜单'，this.handleContextmenu，true)文档。addeventlistener(' mouseup '，this.handleContextmenu，true) }，销毁(){文档。removeeventlistener('上下文菜单'，this.handleContextmenu，true) }}看上去很不错，然后兴高采烈地一试，发现无论怎么点，菜单始终定位在右上角

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

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

template div : class='[prefixCls]' v-click-outer=' onclickouter ' @鼠标输入=' handleMouseenter ' @ mouseleave=' handleMouseleave '！-注意此处-div : class=' RelClasses ' ref=' reference ' @ click=' handleClick ' @上下文菜单。防止=' handleright右击'插槽/插槽/div转换名称=' transition-Drop ' Drop : class=' Drop downls ' v-show=' currentVisible ' : placement=' placement ' ref=' Drop ' @鼠标输入。native=' handleMouseenter ' @ mouse leave。native=' handleMouseleave ' :数据传输=' transfer ' 333366以下省略/script可以看到标注的地方，插槽的外层还有个div，而下拉式的定位是依赖于外层的这个差异的，所以无论你狭槽里的内容位置，在初始化之后再怎么变化，都不会影响到组件的位置了（也有可能是位置：固定的影响)

调整

发现狭槽外层的差异有一个ref='reference '的属性

突然有了想法，我是不是可以直接通过下拉式的参考文献直接把整个外层差异替换掉，于是继续捣腾，改造了一下

模板下拉转移放置='右开始'触发器='自定义' ref='上下文菜单：可见=' currentVisible ' @ on-click out=' handleCancel ' dropdowmenu slot=' list ' dropdowitem驴打滚/DropdownItem DropdownItem炸酱面/DropdownItem DropdownItem已禁用豆汁儿/DropdownItem DropdownItem冰糖葫芦/DropdownItem DropdownItem已分割北京烤鸭/DropDownItem/DropDownMenu/DropDownMenu/模板脚本导出默认值{ data(){ return { poss x : 0，poss : 0，currentVisible: false，locator: null } }，方法： { create locator(){//获取下拉常量contextmenu=这个.$refs.contextMenu //创建定位器常量定位器=文档。创建元素(“div”)定位器。风格。csstext=`位置：固定；left : $ { this . POSx } pxtop : $ { this。posy } px `文档。尸体。appendchild(定位器)//将探测器绑定到下拉式的参考上上下文菜单参考文献。参考=定位器这个。定位器=定位器}、移除定位器(){如果(这。定位器)文档。尸体。移除子(这个。定位器)这个。locator=null }、handleContextmenu ({ button，clientX，clientY }){ if(button===2){ if(this。posx！==CLIENT x)这一点。POSx=CLIENT x if(this。波西！==clientY)这个。posy=clientY if(this。扳机！==' custom '){这个。createlocator()。这个。currentvisible=true } }，handleCancel(){ this。currentvisible=false this。移除定位器()}，挂载(){文档。addevent listener('上下文菜单'，this.handleContextmenu，true)文档。addevent listener(' mouseup '，this.handleContextmenu，true) }，destroled(){ document。removeevent listener('上下文菜单'，this.handleContextmenu，true)文档。removeevent侦听器(' mouseup根据鼠标的位置实时创建一个位置：固定的div，通过给下拉式添加裁判员属性，获取到下拉式对象之后再通过$ref属性将差异赋值到参考

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

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

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

总结

以上所述是小编给大家介绍的射流研究…使用接口的下拉式实现一个右键菜单，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！