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

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

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

一、创建rightClickMenu容器

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

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

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

呈现的效果就如下面这样

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

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

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

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

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

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

四、添加显示、隐藏

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

1. 点击了菜单后
2. 鼠标移开菜单后

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

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

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

<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。如下调整一下

        

          
        
        

          {{ label }} 
        
      

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