Vue如何實現右鍵菜單

# Vue如何實現右鍵菜單

## 前言

在現代Web應用中，右鍵菜單（Context Menu）是提升用戶體驗的重要交互方式。與傳統的頂部或側邊欄菜單不同，右鍵菜單能夠根據用戶當前操作上下文提供針對性的功能選項。本文將詳細介紹如何在Vue框架中實現一個靈活、可復用的右鍵菜單組件。

## 一、右鍵菜單的核心實現原理

### 1.1 基本實現思路
實現右鍵菜單需要解決三個核心問題：

1. **阻止默認行為**：瀏覽器默認右鍵會彈出系統菜單
2. **定位顯示**：根據點擊位置動態確定菜單顯示位置
3. **狀態管理**：控制菜單的顯示/隱藏狀態

### 1.2 關鍵技術點
- `contextmenu` 事件監聽
- `event.preventDefault()` 阻止默認行為
- 動態CSS定位（`position: fixed` + `top/left`）
- Vue的組件化開發

## 二、基礎實現方案

### 2.1 創建基礎組件結構

```vue
<template>
  <div 
    class="context-menu-container"
    @contextmenu.prevent="openMenu"
  >
    <slot></slot>
    
    <div 
      v-if="visible"
      class="context-menu"
      :style="{ top: y + 'px', left: x + 'px' }"
    >
      <div 
        v-for="(item, index) in menuItems" 
        :key="index"
        class="menu-item"
        @click="handleClick(item)"
      >
        {{ item.label }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      x: 0,
      y: 0,
      menuItems: [
        { label: '復制', action: 'copy' },
        { label: '粘貼', action: 'paste' },
        { label: '刷新', action: 'refresh' }
      ]
    }
  },
  methods: {
    openMenu(e) {
      this.x = e.clientX
      this.y = e.clientY
      this.visible = true
    },
    handleClick(item) {
      this.$emit(item.action)
      this.visible = false
    },
    closeMenu() {
      this.visible = false
    }
  },
  mounted() {
    document.addEventListener('click', this.closeMenu)
  },
  beforeDestroy() {
    document.removeEventListener('click', this.closeMenu)
  }
}
</script>

<style>
.context-menu-container {
  position: relative;
}

.context-menu {
  position: fixed;
  background: white;
  border: 1px solid #ddd;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  z-index: 1000;
  min-width: 120px;
}

.menu-item {
  padding: 8px 16px;
  cursor: pointer;
}

.menu-item:hover {
  background: #f0f0f0;
}
</style>

2.2 實現細節解析

1. 事件修飾符：@contextmenu.prevent 同時監聽并阻止默認行為
2. 動態定位：通過鼠標事件的 clientX/clientY 獲取點擊位置
3. 自動關閉：在document上監聽點擊事件來關閉菜單
4. 樣式隔離：使用 position: fixed 確保菜單不受父容器影響

三、進階優化方案

3.1 支持多級菜單

<template>
  <!-- 主菜單結構 -->
  <div 
    v-for="(item, index) in menuItems"
    :key="index"
    class="menu-item-wrapper"
    @mouseenter="showSubmenu(index)"
  >
    <div class="menu-item">
      {{ item.label }}
      <span v-if="item.children" class="arrow">?</span>
    </div>
    
    <!-- 子菜單 -->
    <div 
      v-if="item.children && activeSubmenu === index"
      class="submenu"
      :style="getSubmenuStyle(index)"
    >
      <context-menu-item :items="item.children"/>
    </div>
  </div>
</template>

<script>
// 遞歸組件需要命名
export default {
  name: 'ContextMenuItem',
  props: {
    items: Array
  },
  data() {
    return {
      activeSubmenu: null
    }
  },
  methods: {
    showSubmenu(index) {
      this.activeSubmenu = index
    },
    getSubmenuStyle(index) {
      return {
        top: `${index * 32}px`,
        left: '100%'
      }
    }
  }
}
</script>

<style>
.menu-item-wrapper {
  position: relative;
}

.submenu {
  position: absolute;
  background: white;
  border: 1px solid #ddd;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  min-width: 120px;
}

.arrow {
  float: right;
  font-size: 12px;
}
</style>

3.2 與狀態管理集成

對于復雜應用，建議將菜單配置與Vuex/Pinia集成：

// store/modules/contextMenu.js
export default {
  state: {
    menus: {
      default: [
        { label: '新建', action: 'create' },
        { label: '刪除', action: 'delete' }
      ],
      editor: [
        { label: '撤銷', action: 'undo' },
        { label: '重做', action: 'redo' }
      ]
    }
  },
  getters: {
    getMenuByType: (state) => (type) => {
      return state.menus[type] || state.menus.default
    }
  }
}

3.3 動畫效果增強

使用Vue的過渡組件添加動畫：

<transition name="menu">
  <div v-if="visible" class="context-menu">
    <!-- 菜單內容 -->
  </div>
</transition>

<style>
.menu-enter-active, .menu-leave-active {
  transition: all 0.2s ease;
}
.menu-enter, .menu-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
</style>

四、最佳實踐建議

4.1 可訪問性優化

1. 添加鍵盤導航支持
2. 正確的ARIA屬性
3. 焦點管理

<div 
  role="menu"
  aria-orientation="vertical"
  tabindex="-1"
>
  <div 
    v-for="(item, index) in menuItems"
    :key="index"
    role="menuitem"
    tabindex="0"
    @keydown.enter="handleClick(item)"
    @keydown.down="moveFocus(index + 1)"
    @keydown.up="moveFocus(index - 1)"
  >
    {{ item.label }}
  </div>
</div>

4.2 性能優化

1. 避免頻繁的DOM操作
2. 使用事件委托
3. 虛擬滾動長列表

4.3 組件API設計

良好的組件應該提供清晰的API：

props: {
  items: {
    type: Array,
    required: true,
    validator: (value) => {
      return value.every(item => 'label' in item && 'action' in item)
    }
  },
  theme: {
    type: String,
    default: 'light',
    validator: (value) => ['light', 'dark'].includes(value)
  },
  disabled: Boolean
}

五、完整示例代碼

以下是一個生產可用的右鍵菜單組件實現：

<!-- ContextMenu.vue -->
<template>
  <div>
    <slot></slot>
    
    <teleport to="body">
      <transition name="fade">
        <div
          v-if="visible"
          ref="menu"
          class="context-menu"
          :class="[theme, { 'has-submenu': hasSubmenu }]"
          :style="menuStyle"
          role="menu"
          @click.stop
        >
          <template v-for="(item, index) in processedItems" :key="item.id || index">
            <div
              v-if="item.divider"
              class="divider"
              role="separator"
            ></div>
            <div
              v-else
              class="menu-item"
              :class="{ disabled: item.disabled }"
              role="menuitem"
              tabindex="0"
              @click="!item.disabled && handleClick(item, $event)"
              @mouseenter="handleMouseEnter(item, index)"
              @keydown="handleKeyDown($event, index)"
            >
              <span class="icon" v-if="item.icon">
                <i :class="item.icon"></i>
              </span>
              <span class="label">{{ item.label }}</span>
              <span class="shortcut" v-if="item.shortcut">
                {{ item.shortcut }}
              </span>
              <span class="arrow" v-if="item.children">
                ?
              </span>
              
              <context-menu
                v-if="item.children"
                ref="submenus"
                :items="item.children"
                :theme="theme"
                v-model:visible="submenuVisible[index]"
                :position="getSubmenuPosition(index)"
                @item-click="handleSubmenuClick"
              />
            </div>
          </template>
        </div>
      </transition>
    </teleport>
  </div>
</template>

<script>
import { nextTick } from 'vue'

export default {
  name: 'ContextMenu',
  props: {
    items: Array,
    position: Object,
    theme: {
      type: String,
      default: 'light'
    },
    visible: Boolean
  },
  emits: ['update:visible', 'item-click'],
  data() {
    return {
      x: 0,
      y: 0,
      submenuVisible: [],
      hasSubmenu: false
    }
  },
  computed: {
    processedItems() {
      return this.items.map((item, index) => ({
        ...item,
        id: item.id || `item-${index}`
      }))
    },
    menuStyle() {
      return {
        left: `${this.x}px`,
        top: `${this.y}px`
      }
    }
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        this.$nextTick(() => {
          this.adjustPosition()
          document.addEventListener('click', this.closeAllMenus)
          document.addEventListener('keydown', this.handleEscape)
        })
      } else {
        document.removeEventListener('click', this.closeAllMenus)
        document.removeEventListener('keydown', this.handleEscape)
      }
    }
  },
  mounted() {
    this.hasSubmenu = this.items.some(item => item.children)
    this.submenuVisible = new Array(this.items.length).fill(false)
  },
  methods: {
    openMenu(e) {
      this.x = e.clientX
      this.y = e.clientY
      this.$emit('update:visible', true)
    },
    closeMenu() {
      this.$emit('update:visible', false)
    },
    closeAllMenus() {
      this.closeMenu()
      this.submenuVisible.fill(false)
    },
    handleClick(item, e) {
      if (item.children) return
      
      this.$emit('item-click', item)
      this.closeAllMenus()
    },
    handleSubmenuClick(item) {
      this.$emit('item-click', item)
      this.closeAllMenus()
    },
    handleMouseEnter(item, index) {
      if (!item.children) return
      
      this.submenuVisible.fill(false)
      this.submenuVisible[index] = true
    },
    adjustPosition() {
      nextTick(() => {
        const menu = this.$refs.menu
        if (!menu) return
        
        const rect = menu.getBoundingClientRect()
        const windowWidth = window.innerWidth
        const windowHeight = window.innerHeight
        
        if (rect.right > windowWidth) {
          this.x = windowWidth - rect.width - 5
        }
        
        if (rect.bottom > windowHeight) {
          this.y = windowHeight - rect.height - 5
        }
      })
    },
    getSubmenuPosition(index) {
      if (!this.$refs.submenus || !this.$refs.submenus[index]) {
        return { x: 0, y: 0 }
      }
      
      const menu = this.$refs.menu
      const menuRect = menu.getBoundingClientRect()
      
      return {
        x: menuRect.right - 5,
        y: menuRect.top + (index * 32)
      }
    },
    handleKeyDown(e, index) {
      switch (e.key) {
        case 'ArrowDown':
          e.preventDefault()
          this.moveFocus(index + 1)
          break
        case 'ArrowUp':
          e.preventDefault()
          this.moveFocus(index - 1)
          break
        case 'ArrowRight':
          if (this.items[index].children) {
            this.submenuVisible.fill(false)
            this.submenuVisible[index] = true
            this.$nextTick(() => {
              this.$refs.submenus[index]?.focusFirstItem()
            })
          }
          break
        case 'Enter':
        case ' ':
          e.preventDefault()
          this.handleClick(this.items[index], e)
          break
      }
    },
    moveFocus(newIndex) {
      const items = this.$el.querySelectorAll('.menu-item:not(.disabled)')
      if (!items.length) return
      
      newIndex = Math.max(0, Math.min(newIndex, items.length - 1))
      items[newIndex].focus()
    },
    focusFirstItem() {
      const firstItem = this.$el.querySelector('.menu-item:not(.disabled)')
      if (firstItem) firstItem.focus()
    },
    handleEscape(e) {
      if (e.key === 'Escape') {
        this.closeAllMenus()
      }
    }
  }
}
</script>

<style scoped>
.context-menu {
  position: fixed;
  min-width: 200px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  padding: 4px 0;
  outline: none;
}

.context-menu.dark {
  background: #333;
  color: #fff;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  cursor: pointer;
  position: relative;
}

.menu-item:hover {
  background: #f0f0f0;
}

.dark .menu-item:hover {
  background: #444;
}

.menu-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.divider {
  height: 1px;
  background: #eee;
  margin: 4px 0;
}

.dark .divider {
  background: #555;
}

.icon {
  margin-right: 8px;
  width: 16px;
  text-align: center;
}

.label {
  flex: 1;
}

.shortcut {
  margin-left: 16px;
  color: #999;
  font-size: 0.8em;
}

.dark .shortcut {
  color: #bbb;
}

.arrow {
  margin-left: 8px;
  font-size: 0.8em;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.15s, transform 0.15s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(-5px);
}
</style>

六、總結

本文詳細介紹了在Vue中實現右鍵菜單的完整方案，包括：

1. 基礎實現原理與核心代碼
2. 多級菜單、狀態管理等進階功能
3. 可訪問性、性能優化等最佳實踐
4. 生產可用的完整組件實現

通過組件化開發，我們可以創建一個高度可復用、功能豐富的右鍵菜單組件，能夠適應各種業務場景需求。實際開發中還可以根據具體需求擴展以下功能：

• 菜單項動態加載
• 權限控制顯示
• 主題系統集成
• 移動端適配
• 與其他UI庫的兼容

希望本文能幫助你在Vue項目中實現優雅的右鍵菜單交互體驗！ “`