vue中自定义右键菜单

vue中自定义右键菜单

1. 在所编辑的页面，需要添加右键菜单的元素，绑定contextmenu事件，如下：

            <li
              v-for="item in resourceList"
              :key="item.id"
              @click="handleClickFolder(item)"
              @contextmenu.prevent="openMenu($event,item)"
            >
            </li>

2. 在页面编写右键菜单内容:

<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
      <!-- <li v-if="rightClickItem.fileType==99" @click="handleClickFolder(rightClickItem)">打开</li>
      <li @click="handleDelete(rightClickItem)">删除</li>
      <li @click="handleDownloadFile(rightClickItem)" v-if="rightClickItem.fileType!=99">下载</li>
      <li @click="handlePreviewFile(rightClickItem)" v-if="rightClickItem.fileType!=99">预览</li>
      <li @click="handleUpdate(rightClickItem)">编辑</li> -->
      <li>内容</li>
    </ul>

3. 在data()中定义需要的变量属性

data() { 
	return {
			visible: false,
			top: 0,
			left: 0
	}
}

4. 观察visible的变化，来触发关闭右键菜单，调用关闭菜单的方法

  watch: {
    visible(value) {
      if (value) {
        document.body.addEventListener('click', this.closeMenu)
      } else {
        document.body.removeEventListener('click', this.closeMenu)
      }
    }
  }

5. 在method中定义打开右键菜单和关闭右键菜单的两个方法

    openMenu(e, item) {
      this.rightClickItem = item;

      var x = e.pageX;
      var y = e.pageY;

      this.top = y;
      this.left = x;
      
      this.visible = true;
    },
    closeMenu() {
      this.visible = false;
    }

6. 在style中写右键菜单的样式

.contextmenu {
  margin: 0;
  background: #fff;
  z-index: 3000;
  position: absolute;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
}

.contextmenu li {
  margin: 0;
  padding: 7px 16px;
  cursor: pointer;
}

.contextmenu li:hover {
  background: #eee;
}

参考文档地址