<template>
<div @contextmenu.prevent>
   <li v-for="item in resourceList" :key="item.id" @click="handleClickFolder(item)"
    @contextmenu.prevent="openMenu($event,item)">
    {{item}}
  </li> 
    
    //右键菜单项
  <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>
</div>
</template>

<script>
export default {
  name: 'Menu',
  data () {
    return {
      visible: false,
      top: 0,
      left: 0,
      resourceList: [
        '测试说明',
        '需求文档',
        '项目实例',
        '用户操作',
        '项目管理',
      ]
    }
  },
  methods: {
    openMenu (e, item) {
      this.ClickItemRoom = item;

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

      this.top = y;
      this.left = x;

      this.visible = true;
    },
    closeMenu () {
      this.visible = false;
    }, 
    handleClickFolder (item) {
      console.log(item);
    }
  },
  watch: {
    visible (value) {
      if (value) {
        document.body.addEventListener('click', this.closeMenu)
      } else {
        document.body.removeEventListener('click', this.closeMenu)
      }
    }
  },
}
</script>

<style>
.contextmenu {
  margin: 0;
  background: #fff;
  z-index: 30;
  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: #c6e2ff;
}
</style>