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;
}

參考文件地址