JS使用iView的Dropdown实现一个右键菜单
(编辑：jimmy 日期: 2024/11/18 浏览：2)
前言
前段时间在用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实现一个右键菜单,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！