自定义启动菜单出现了,又隐藏了

[mofeisike]

我封装了你的子菜单和菜单项 ,你的案例的CustomShow.vue, 一开始没有出现菜单, 我调试了一遍, 在一个按钮按下后, 发现在执行了handleShow方法后, 确实出现了, visible等于true, 但是后来, 不知道为什么触发了handleBodyClick(), 就是好像有一些东西点击了菜单外, 引起的隐藏菜单,为什么呢?

<template>
  <div class="example">

    <button @click="handleShow">显示</button>
    <button @click="handleHide">隐藏</button>

    <v-contextmenu ref="contextmenu">
      <v-loopcontextmenu :menu="menu"></v-loopcontextmenu>
    </v-contextmenu>

    <div class="box" ref="box">
      基本菜单
    </div>

  </div>
</template>

<script>

  import directive from '../../common/contextmenu/directive'
  import ContextMenu from "../../common/contextmenu/components/Contextmenu";
  import LoopContextmenu from "../../common/contextmenu/components/LoopContextmenu";

  export default {
    name: 'CustomShow',
    data() {
      return {
        menu: [
          {
            name: '视图',
          }, {
            name: '编辑',
          },
        ]
      }
    },
    methods: {
      handleShow() {
        const targetDimensions = this.$refs.box.getBoundingClientRect();
        const postition = {
          top: Math.random() * targetDimensions.height + targetDimensions.top,
          left: Math.random() * targetDimensions.width + targetDimensions.left,
        }
        this.$refs.contextmenu.show(postition);
      },
      handleHide() {
        this.$refs.contextmenu.hide()
      },
    },
    directives: {
      contextmenu: directive,
    },
    components: {
      "v-contextmenu": ContextMenu,
      "v-loopcontextmenu": LoopContextmenu,
    },
  }
</script>

<style scoped>
  .box {
    width: 100%;
    height: 300px;
  }
</style>

[mofeisike]

已解决 阻止传播就好

handleShow(e) {
        const targetDimensions = this.$refs.box.getBoundingClientRect();
        const postition = {
          top: Math.random() * targetDimensions.height + targetDimensions.top,
          left: Math.random() * targetDimensions.width + targetDimensions.left,
        }
        //阻止冒泡
        e.stopPropagation();
        this.$refs.contextmenu.show(postition);
      },

[mofeisike]

这样也可以,不用原生的js阻止事件的冒泡, 用vue的更好点

<button @click.stop="handleShow">显示</button>