vue-右键菜单

        <span
          class="note-content"
          :class="{ choosed_note: node.id == chooseFolderId }"
          @click="chooseCaseFolder(node)"
          @contextmenu.prevent="openMenu($event, node, path)"
        >
          <i class="el-icon-folder" />
          <i class="el-icon-rank drag-trigger" />
          {{ node.text }}
        </span>

    <!-- 右键菜单 -->
    <ul
      ref="rightMenu"
      v-show="rightMenuVisible"
      :style="{ left: rightMenuLeft + 'px', top: rightMenuTop + 'px' }"
      class="contextmenu"
    >
      <li @click="addChildProjectFolder()">新增子目录</li>
      <li @click="updateProjectFolder()">编辑当前目录</li>
      <li @click="deleteProjectFolder()">删除当前目录</li>
      <li @click="addProjectFolder()">新增根目录</li>
    </ul>

    // 选中某个节点
    chooseCaseFolder(node, path) {
      this.chooseFolderId = node.id;
      this.chooseFolderJsonPath = path;
    },
    // 右键菜单
    openMenu(e, item, path) {
      if (item) {
        this.chooseCaseFolder(item, path);
      }
      var x = e.pageX;
      var y = e.pageY;
      this.rightMenuTop = y;
      this.rightMenuLeft = x;
      this.rightMenuVisible = true;
    },
    closeMenu() {
      this.rightMenuVisible = false;
    },

  mounted() {
    // 失去焦点时关闭右击菜单
    document.addEventListener("click", (e) => {
      if (!this.$refs.rightMenu.contains(e.target))
        this.rightMenuVisible = false;
    });
  },