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

更新时间：2020-08-25 00:54:01 作者：startmvc

前言前段时间在用iView做个项目，其中需要使用自定义的右键菜单，然后去官网找了一下，

前言

前段时间在用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会根据鼠标所在的位置出现啦