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

0

前言

前段时间在用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"的属性

突然有了想法,我是不是可以直接通过Dropdownrefs直接把整个外层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: fixeddiv,通过给Dropdown添加ref属性,获取到Dropdown对象之后再通过$ref属性将div赋值到reference

大功告成,现在Dropdown会根据鼠标所在的位置出现啦

图片描述

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

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

你可能感兴趣的

载入中...