前言

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

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

尝试

Dropdown的使用大概是这个样子

<template>
  <Dropdown>
    <a href="javascript:void(0)">
      下拉菜单
      <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，具体代码可以参考这个仓库