JS使用iView的Dropdown实现一个右键菜单
前言
前段时间在用iView做个项目,其中需要使用自定义的右键菜单,然后去官网找了一下,发现有个Dropdown的组件,便想着能不能用来做个右键菜单的组件
你可能需要对iView有一定的使用经验
尝试
Dropdown的使用大概是这个样子
<template> <Dropdown> <a href="javascript:void(0)" rel="external nofollow" > 下拉菜单 <Icon type="ios-arrow-down"></Icon> </a> <DropdownMenu slot="list"> <DropdownItem>驴打滚</DropdownItem> <DropdownItem>炸酱面</DropdownItem> <DropdownItem disabled>豆汁儿</DropdownItem> <DropdownItem>冰糖葫芦</DropdownItem> <DropdownItem divided>北京烤鸭</DropdownItem> </DropdownMenu> </Dropdown> </template> <script> export default { } </script>
发现有个触发元素slot,可以自定义的插入元素,我一想,只要把slot的内容设置为position: fixed,在右键的时候给它实时设置一下鼠标所在的位置不就行了嘛,然后一顿捣腾
<template> <Dropdown transfer placement="right-start" trigger="custom" :visible="currentVisible" @on-clickoutside="handleCancel" > <div :style="locatorStyle"></div> <DropdownMenu slot="list"> <DropdownItem>驴打滚</DropdownItem> <DropdownItem>炸酱面</DropdownItem> <DropdownItem disabled>豆汁儿</DropdownItem> <DropdownItem>冰糖葫芦</DropdownItem> <DropdownItem divided>北京烤鸭</DropdownItem> </DropdownMenu> </Dropdown> </template> <script> export default { data () { return { posX: 0, posY: 0, currentVisible: false } }, computed: { locatorStyle () { return { position: 'fixed', left: `${this.posX}px`, top: `${this.posY}px` } } }, methods: { handleContextmenu ({ button, clientX, clientY }) { if (button === 2) { if (this.posX !== clientX) this.posX = clientX if (this.posY !== clientY) this.posY = clientY this.currentVisible = true } }, handleCancel () { this.currentVisible = false } }, mounted () { document.addEventListener('contextmenu', this.handleContextmenu, true) document.addEventListener('mouseup', this.handleContextmenu, true) }, destroyed () { document.removeEventListener('contextmenu', this.handleContextmenu, true) document.removeEventListener('mouseup', this.handleContextmenu, true) } } </script>
看上去很不错,然后兴高采烈地一试,发现无论怎么点,菜单始终定位在右上角
slot的元素位置确实发生了变化,然而菜单位置始终不变化
这可把我折腾了半天,也没弄出个结果。抱着 极不情愿 一探究竟的心情,我打开了Dropdown的源码
<template> <div :class="[prefixCls]" v-click-outside="onClickoutside" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave"> <!-- 注意此处 --> <div :class="relClasses" ref="reference" @click="handleClick" @contextmenu.prevent="handleRightClick"><slot></slot></div> <transition name="transition-drop"> <Drop :class="dropdownCls" v-show="currentVisible" :placement="placement" ref="drop" @mouseenter.native="handleMouseenter" @mouseleave.native="handleMouseleave" :data-transfer="transfer" :transfer="transfer" v-transfer-dom><slot name="list"></slot></Drop> </transition> </div> </template> <script> // 以下省略 </script>
可以看到标注的地方,slot的外层还有个div,而Dropdown的定位是依赖于外层的这个div的,所以无论你slot里的内容位置,在初始化之后再怎么变化,都不会影响到组件的位置了(也有可能是position: fixed的影响)
调整
发现slot外层的div有一个ref="reference"
的属性
突然有了想法,我是不是可以直接通过Dropdown的refs直接把整个外层div替换掉,于是继续捣腾,改造了一下
<template> <Dropdown transfer placement="right-start" trigger="custom" ref="contextMenu" :visible="currentVisible" @on-clickoutside="handleCancel" > <DropdownMenu slot="list"> <DropdownItem>驴打滚</DropdownItem> <DropdownItem>炸酱面</DropdownItem> <DropdownItem disabled>豆汁儿</DropdownItem> <DropdownItem>冰糖葫芦</DropdownItem> <DropdownItem divided>北京烤鸭</DropdownItem> </DropdownMenu> </Dropdown> </template> <script> export default { data () { return { posX: 0, posY: 0, currentVisible: false, locator: null } }, methods: { createLocator () { // 获取Dropdown const contextmenu = this.$refs.contextMenu // 创建locator const locator = document.createElement('div') locator.style.cssText = `position:fixed;left:${this.posX}px;top:${this.posY}px` document.body.appendChild(locator) // 将locator绑定到Dropdown的reference上 contextmenu.$refs.reference = locator this.locator = locator }, removeLocator () { if (this.locator) document.body.removeChild(this.locator) this.locator = null }, handleContextmenu ({ button, clientX, clientY }) { if (button === 2) { if (this.posX !== clientX) this.posX = clientX if (this.posY !== clientY) this.posY = clientY if (this.trigger !== 'custom') { this.createLocator() this.currentVisible = true } } }, handleCancel () { this.currentVisible = false this.removeLocator() } }, mounted () { document.addEventListener('contextmenu', this.handleContextmenu, true) document.addEventListener('mouseup', this.handleContextmenu, true) }, destroyed () { document.removeEventListener('contextmenu', this.handleContextmenu, true) document.removeEventListener('mouseup', this.handleContextmenu, true) } } </script>
根据鼠标的位置实时创建一个position: fixed
的div,通过给Dropdown添加ref属性,获取到Dropdown对象之后再通过$ref属性将div赋值到reference
大功告成,现在Dropdown会根据鼠标所在的位置出现啦
最后把一些点击的回调方法补全,就是一个像样的右键菜单组件了
当然作为一个可以复用的组件,还需要把一些通用逻辑再提取出来,以及补全一些常用的API,具体代码可以参考这个仓库
总结
以上所述是小编给大家介绍的JS使用iView的Dropdown实现一个右键菜单,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
下一篇:一文读懂ES7中的javascript修饰器