来实现一个右键菜单吧

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

由于公司项目的需要，需要在目前视图库上加一个右键菜单，我开始觉得这还挺好搞得，因为我在这个项目得其他地方看到过类似的东西，我开始以为是一个组件来着，后面找到对应的页面一看，得，不是组件，本来想直接复制的，看到上面还绑定了一大堆事件啥的，而且点击后出现的位置还是固定的，就想着算了，还是自己写一个吧，后边用着也方便，就随便写了下。有不同的想法欢迎交流~

废话不多说，俺这就开始。首先准备好基础环境，由于公司项目是vue2的，因此我这里使用的也是vue2 + element ui。相信各位都是使用vue的高手了，因此其他方面就不赘述了。最后就是像下面这个样子。

以上这个组件总共包含了两部分，rightClickMenu 和 rightMenuItem,其中rightClickMenu是整个组件，其中有方法和属性控制整个组件的显示位置、隐藏等。rightMenuItem为放入组件的内容，相当于element的el-form-item。使用方式如下

<rightMenu v-model="showMenu" :position="menuPosition">
      <rightMenuItem label="1"></rightMenuItem>
      <rightMenuItem label="2" child>
        <div>
          <rightMenuItem label="2-1"></rightMenuItem>
          <rightMenuItem label="2-2"></rightMenuItem>
        </div>
      </rightMenuItem>
      <rightMenuItem label="3"></rightMenuItem>
      <rightMenuItem label="4"></rightMenuItem>
</rightMenu>

一、创建rightClickMenu容器

新建一个组件rightClickMenu.vue,增加基本的布局代码，并且增加插槽，用来放置我们要展现的内容

<template>
  <div class="right-menu">
    <slot></slot>
  </div>
</template>

增加对于容器的样式设置，这里我设置的定位方式是fixed，因为考虑的后续的复用问题，且使用绝对定位的话还要考虑父级，就直接相对于窗口了。具体的样式大家可以自行更改，这里只是符合了我项目的样式。

<style scoped>
.right-menu {
  position: fixed;
  z-index: 10086;
  width: 125px;
  height: auto;
  left: 0;
  top: 0;
  font-size: 16px;
  text-align: center;
  background: #255892;
  display: flex;
  flex-direction: column;
  color: #fff;
  justify-content: space-around;
}

基本架构搭好了，下面要让我们的大哥可以移动，那么肯定是要动态传入位置的，所以我们还要改一下,首先模板上要增加样式的绑定。就像这样。

<template>
  <div
    class="right-menu"
    :style="{ left: position.x + 'px', top: position.y + 'px' }"
  >
    <slot></slot>
  </div>
</template>

可以看到，我已经将组件的left 和 top值给绑定了，下面我们只要把鼠标右键点击的坐标传入就好了。那既然已经需要外部传入值了，那么还要一个接收的地方，因此增加下面这段，为组件添加名为position的props用来接收位置值。

<script>
export default {
  props: {
    position: {
      type: Object,
      default() {
        return {
          x: 0,
          y: 0,
        };
      }
    }
  }
};
</script>

二、获取鼠标点击的位置

上面的步骤中我们的组件的一个最基本的地方就已经创建好了。下面让我们在需要使用的页面中引入它，看看效果。引入后是啥都没有的，因为没有设置组件的高度，那么就先随便的写一些东西，像这样。

  <rightMenu> 你过来啊 </rightMenu>

可以看到它出现了，在我们页面的左上角。只不过这会儿没啥反应，因为我们还没有处理鼠标的右键点击事件。下面开始。由于鼠标右键会存在浏览器的默认菜单，因此我们要将这个默认行为给屏蔽掉。

找到你页面中的目标元素
添加事件监听，取消默认行为

就像这样

上图我要取消右键默认行为的元素是el-col，因此我们在它身上添加 @contextmenu.prevent.native="rightClick($event, item)", 之后在data中添加menuPosition用来存储获取到的位置，它是一个对象，像这样 menuPosition: { x: 0, y: 0 }。并且在当前引入的页面的methods中添加rightClick方法。如下

 rightClick(e, item) {
      e.preventDefault();//取消默认行为
      this.menuPosition.x = e.clientX;
      this.menuPosition.y = e.clientY;
    }

现在我们就可以获取到鼠标右键点击的位置了，下面在组件上绑定好menuPosition。

  <rightMenu :position="menuPosition"> 你过来啊 </rightMenu>

现在回到页面中，在目标元素上按下右键，可以看到组件移动了，并且出现在了我们鼠标点击的位置。

三、创建rightMenuItem

上面的步骤中我们的已经搞定了外层组件的移动，这里我们来搞定内容的呈现。同样的，先创建rightMenuItem.vue文件。因为这里公司的业务来说是有些菜单会有子菜单，目前是会有一级的子菜单，因此我这里只考虑了一级的情况。如下图，子菜单这里我使用了element的el-popover组件来实现。

先搭建基本的结构。

<template>
  <div class="right-menu-item">
      <span>{{ label }}</span>
  </div>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
    };
  },
  methods: {},
};
</script>

<style scoped lang='less'>
.right-menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 5px 8px 8px;
  position: relative;
  cursor: pointer;
  text-align: center;
  &:hover {
    background: #143d6c;
  }
}
</style>

基本结构搭建完了，下面引入页面中，放置在rightMenu，多放几个，像这样

 <rightMenu :position="menuPosition">
      <rightMenuItem label="1"></rightMenuItem>
      <rightMenuItem label="2"></rightMenuItem>
      <rightMenuItem label="3"></rightMenuItem>
      <rightMenuItem label="4"></rightMenuItem>
  </rightMenu>

呈现的效果就如下面这样

好，现在一级菜单出来了，那我这里还需要一个二级菜单啊，怎么搞呢。看上面的图可以看到二级菜单的显示效果跟一级菜单其实是差不多的，区别是有子菜单时会在一级菜单后面跟一个箭头。前面说了这里使用的element的el-popover组件来实现的，所以在rightMenuItem中需要改一下。如下。

<template>
  <div class="right-menu-item">
    <template v-if="!child">
      <span>{{ label }}</span>
    </template>
    <div v-if="child" style="width: 100%">
      <el-popover
        placement="right"
        trigger="hover"
        v-model="show"
        :visible-arrow="false"
      >
        <div  style="background: #255892">
          <slot></slot>
        </div>
        <div
          slot="reference"
          style="
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          {{ label }} <i class="el-icon-arrow-right"></i>
        </div>
      </el-popover>
    </div>
  </div>
</template>

我在props中增加了一个属性child用来标识是否有下级，默认值是false，显示的结构用v-if指令控制。

  props: {
    label: {
      type: String,
      default: "",
    },
    child: {
      type: Boolean,
      default: false,
    },
  },

这一步完成后我们只需要这样使用

 <rightMenuItem label="2" child>
     <div>
         <rightMenuItem label="2-1"></rightMenuItem>
         <rightMenuItem label="2-2"></rightMenuItem>
      </div>
  </rightMenuItem>

就能看到在名为2的菜单多出了一个箭头，并且有了下级菜单，如下

到这里这个右键菜单已经完成一大半了。做到这里是否发现了问题呢。对的，这个右键菜单出来后就消失不了了，这很明显不是我想要的效果嘛，那么下面就来添加显示隐藏的逻辑。

四、添加显示、隐藏

最开始说了，显示隐藏是我们的rightMenuItem来进行控制的。所以相关的控制方法都写在它里面，让我们想一下啥时候需要显示隐藏呢。显示的话肯定是在右键点击相关的元素后就要显示，那隐藏呢，有以下几点：

点击了菜单后
鼠标移开菜单后

所以，就想着如何实现以上几点就好了。

那么如何控制显示和隐藏呢？一提到这个我相信各位脑海中瞬间就能出现两个指令v-if 和 v-show，的确可以用两个指令来实现，但是我就是想用自定义组件的v-model来搞，就像elementel-dialog一样的，这样可以在父页面上省那么点赋值的操作。🤣🤣🤣😎😎

让我们修改一下rightMenuItem，像这样

<template>
  <div
    class="right-menu"
    :style="{ left: position.x + 'px', top: position.y + 'px' }"
    @click="menuClick"
    @mouseleave="onMouseLeave"
    @mouseenter="onMouseEnter"
    @contextmenu="
      (e) => {
        e.preventDefault();
      }
    "
    v-show="value"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    position: {
      type: Object,
      default() {
        return {
          x: 0,
          y: 0,
        };
      },
    },

    value: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      timer: null,
    };
  },

  methods: {
    emitInput(val) {
      //抛出input事件用于v-model
      this.$emit("input", val);
    },
    onMouseEnter() {
      clearTimeout(this.timer);
      //保持显示
      this.emitInput(true);
    },
    onMouseLeave() {
      console.log("鼠标离开");
      //自动隐藏250毫秒后隐藏组件   一个简陋的防抖
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        // this.$emit("closeMenu");
        //设置为不显示
        this.emitInput(false);
      }, 250);
    },
    menuClick(e) {
       this.emitInput(false);
    },
  },
};

上面代码中，添加了鼠标离开、进入、点击的的事件监听，移除了默认的右键菜单。在鼠标点击了或者鼠标离开后250毫秒就会隐藏自身了。以上对于一级菜单来说是有效的，但是，由于使用了el-popover，因此在我们将鼠标移入二级菜单的时候，会触发鼠标离开事件，导致一级菜单隐藏，这是不愿意看到的。所以，我们修改一下rightMenuItem。如下调整一下

<el-popover
        placement="right"
        trigger="hover"
        v-model="show"
        :visible-arrow="false"
      >
        <div
          style="background: #255892"
          @mouseenter="$parent.onMouseEnter();"
          @mouseleave="$parent.onMouseLeave()"
          @contextmenu="
            (e) => {
              e.preventDefault();
            }
          "
        >
          <slot></slot>
        </div>
        <div
          slot="reference"
          style="
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          {{ label }} <i class="el-icon-arrow-right"></i>
        </div>
      </el-popover>

在它上面监听鼠标移入和离开事件，在鼠标移入时调用父组件的onMouseEnter()方法保持一级菜单的显示。由于使用了$parent，所以这里只能做到两级，因为这符合我目前的业务需求。具体的可以根据自己的业务做更改。