Vue右鍵菜單詳解

一、Vue右鍵菜單組件

Vue右鍵菜單是一個常用的功能組件，它用於在鼠標右鍵點擊時彈出一個自定義的菜單。Vue的官方文檔中並沒有對右鍵菜單進行提及，但是我們可以藉助第三方庫element-ui中的ContextMenu組件來實現。

<template>
  <div>
    <el-button@contextmenu.native.prevent)="handleContextMenu">右鍵點擊我</el-button>
    <el-context-menuref="contextMenu">
      <el-menu>
        <el-menu-item>上傳文件</el-menu-item>
        <el-menu-item>新建文件夾</el-menu-item>
      </el-menu>
    </el-context-menu>
  </div>
</template>

<script>
import { ElButton, ElContextMenu, ElMenuItem, ElMenu } from 'element-ui';
export default {
  components: {
    ElButton,
    ElContextMenu,
    ElMenuItem,
    ElMenu,
  },
  data() {
    return {
      contextMenu: null,
    }
  },
  methods: {
    handleContextMenu(event) {
      event.preventDefault();
      this.contextMenu.handleContextmenu(event);
    }
  }
}
</script>

在上面的例子中，我們引入了element-ui庫，並使用其中的ElButton, ElContextMenu, ElMenuItem, ElMenu組件來實現一個右鍵菜單。我們在頁面中放置一個ElButton按鈕，在其上添加了一個contextmenu.native.prevent事件監聽，當我們在該按鈕上右鍵點擊時，該事件會被觸發，並且我們通過調用handleContextMenu方法，讓右鍵菜單彈出來。在ElContextMenu組件中，我們放置了一個ElMenu組件，並且給其添加了兩個ElMenuItem組件，這兩個菜單項就是我們的右鍵菜單選項。

二、Vue右鍵菜單怎麼隱藏

當右鍵菜單彈出後，用戶有可能會通過點擊其他地方來關閉它，或者進行特定操作後需要關閉它。要關閉右鍵菜單，我們可以在Vue組件中保存一個ContextMenu實例，並且通過調用其隱藏方法來關閉該右鍵菜單。

<template>
  <div>
    <el-button@contextmenu.native.prevent)="handleContextMenu">右鍵點擊我</el-button>
    <el-context-menuref="contextMenu">
      <el-menu>
        <el-menu-item>上傳文件</el-menu-item>
        <el-menu-item>新建文件夾</el-menu-item>
      </el-menu>
    </el-context-menu>
  </div>
</template>

<script>
import { ElButton, ElContextMenu, ElMenuItem, ElMenu } from 'element-ui';
export default {
  components: {
    ElButton,
    ElContextMenu,
    ElMenuItem,
    ElMenu,
  },
  data() {
    return {
      contextMenu: null,
    }
  },
  methods: {
    handleContextMenu(event) {
      event.preventDefault();
      this.contextMenu.handleContextmenu(event);
      document.addEventListener('click', this.handleDocumentClick);
    },
    handleDocumentClick() {
      this.contextMenu.hide();
      document.removeEventListener('click', this.handleDocumentClick);
    }
  }
}
</script>

在上面的例子中，我們通過document.addEventListener()方法來監聽document的click事件。當用戶在頁面中點擊其他地方時，該事件會被觸發。同時，我們也通過document.removeEventListener()方法來移除監聽器。在handleContextMenu方法中，我們除了調用handleContextmenu方法打開右鍵菜單外，還添加了一個click事件監聽器，該監聽器會在handleContextMenu方法調用後加入。

當用戶點擊頁面其他地方時，handleDocumentClick方法會被調用。在這個方法中，我們調用了contextMenu實例的hide()方法來隱藏右鍵菜單，同時移除click事件監聽器。

三、Vue右鍵菜單指令

除了在組件中使用右鍵菜單功能，我們還可以通過Vue指令來實現右鍵菜單功能。

<template>
  <div>
    <divv-right-click-menu="menuOptions">右鍵點擊我</divv-right-click-menu>
  </div>
</template>

<script>
import DivvRightClickMenu from './divv-right-click-menu';
export default {
  directives: {
    DivvRightClickMenu,
  },
  data() {
    return {
      menuOptions: [
        {
          name: '上傳文件',
          action: () => {
            console.log('upload file');
          },
        },
        {
          name: '新建文件夾',
          action: () => {
            console.log('create folder');
          },
        },
      ],
    }
  },
}
</script>

在上面的例子中，我們定義了一個指令DivvRightClickMenu，並且在頁面中使用它。該指令會在被綁定的元素上添加一個contextmenu監聽事件。同時，我們在數據中定義了一個menuOptions數組，其中包含了菜單選項的名稱和執行方法。當用戶右鍵點擊指定元素時，菜單會彈出來，當菜單選項被選中時，指定的方法將會被執行。

四、Vue右鍵菜單組件element

除了第三方庫element-ui提供的ContextMenu組件之外，Vue的其他第三方庫中也可能會包含右鍵菜單組件。

<template>
  <div>
    <b-right-click-menu@click-item="(index) => handleClick(index)">
      <b-menu-item v-for="(item, index) in menuOptions" :key="index">{{ item.name }}</b-menu-item>
    </b-right-click-menu>
  </div>
</template>

<script>
import { BRightClickMenu, BMenuItem } from 'bootstrap-vue';
export default {
  components: {
    BRightClickMenu,
    BMenuItem,
  },
  data() {
    return {
      menuOptions: [
        {
          name: '上傳文件',
        },
        {
          name: '新建文件夾',
        },
      ],
    }
  },
  methods: {
    handleClick(index) {
      const menuItem = this.menuOptions[index];
      console.log(`click ${menuItem.name}`);
    },
  },
}
</script>

在上面的例子中，我們使用了Bootstrap Vue庫中的BRightClickMenu和BMenuItem組件來實現右鍵菜單功能。我們在頁面中放置了一個BRightClickMenu組件，並且在其內部放置了多個BMenuItem組件，這些組件就是我們的右鍵菜單選項。我們可以通過@click-item事件來監聽右鍵菜單選項的點擊事件，當用戶點擊時，handleClick方法會被調用，我們通過查找當前選中菜單的索引，來執行指定的方法。

五、Vue右鍵菜單被覆蓋

在使用右鍵菜單時，我們有時會遇到被菜單本身或其他彈出組件覆蓋住的情況。為了解決這個問題，我們可以通過通過計算菜單在頁面中的位置，並在顯示菜單時將其放置在最頂部。

// 組件部分
<template>
  <div>
    <el-button@contextmenu.native.prevent)="handleContextMenu">右鍵點擊我</el-button>
    <el-context-menuv-if="visible" ref="contextMenu">
      <el-menu>
        <el-menu-item>上傳文件</el-menu-item>
        <el-menu-item>新建文件夾</el-menu-item>
      </el-menu>
    </el-context-menu>
  </div>
</template>

<script>
import { ElButton, ElContextMenu, ElMenuItem, ElMenu } from 'element-ui';
export default {
  components: {
    ElButton,
    ElContextMenu,
    ElMenuItem,
    ElMenu,
  },
  data() {
    return {
      visible: false,
    }
  },
  methods: {
    handleContextMenu(event) {
      event.preventDefault();
      this.visible = true;
      const contextMenu = this.$refs.contextMenu.$el;
      contextMenu.style.display = 'block';
      const x = event.clientX;
      const y = event.clientY;
      const menuWidth = contextMenu.offsetWidth;
      const menuHeight = contextMenu.offsetHeight;
      const screenWidth = window.innerWidth;
      const screenHeight = window.innerHeight;
      if (x + menuWidth > screenWidth) {
        contextMenu.style.left = `${screenWidth - menuWidth}px`;
      } else {
        contextMenu.style.left = `${x}px`;
      }
      if (y + menuHeight > screenHeight) {
        contextMenu.style.top = `${screenHeight - menuHeight}px`;
      } else {
        contextMenu.style.top = `${y}px`;
      }
      document.addEventListener('click', this.handleDocumentClick);
    },
    handleDocumentClick() {
      this.$refs.contextMenu.hide();
      this.visible = false;
      document.removeEventListener('click', this.handleDocumentClick);
    }
  }
}
</script>

在上面的例子中，我們在handleContextMenu方法中添加了一些代碼，用於計算菜單應該出現的位置。我們通過獲取點擊事件的clientX和clientY來獲取菜單應該出現的坐標，然後獲取菜單的寬度和高度，以及屏幕的寬度和高度。通過這些變量的計算，我們可以計算出菜單應當出現的位置，並將其放置在屏幕的最頂部。同時，我們還有將visible變量保存為true，這樣我們就可以在組件中判斷菜單是否正在顯示，並正確隱藏它。