Vue實(shí)現(xiàn)右鍵菜單組件的超詳細(xì)教程(支持快捷鍵)

更新時(shí)間：2024年02月22日 08:27:21 作者：劉在心中-Dennis

右鍵菜單組件非常常見,所有的前端開發(fā)工程師都會(huì)遇到類似的功能組件開發(fā)需求,這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)右鍵菜單組件的超詳細(xì)教程,文中介紹的方法支持快捷鍵,需要的朋友可以參考下

在Web應(yīng)用程序開發(fā)中，右鍵菜單是一個(gè)常見的功能需求。它允許用戶通過(guò)鼠標(biāo)右鍵點(diǎn)擊元素，彈出一個(gè)自定義的菜單，提供一系列操作選項(xiàng)。Vue.js作為一種流行的JavaScript框架，提供了豐富的工具和組件，可以輕松實(shí)現(xiàn)各種交互效果，包括右鍵菜單。本文將向你展示如何使用Vue.js實(shí)現(xiàn)一個(gè)靈活可定制的右鍵菜單組件。

使用Vue.js的組件化開發(fā)方式來(lái)實(shí)現(xiàn)右鍵菜單組件。該組件接受一個(gè)選項(xiàng)數(shù)組作為參數(shù)，每個(gè)選項(xiàng)包含菜單項(xiàng)的名稱、點(diǎn)擊事件、圖標(biāo)和快捷鍵提示。當(dāng)用戶右鍵點(diǎn)擊某個(gè)元素時(shí)，組件會(huì)根據(jù)鼠標(biāo)位置顯示菜單，并響應(yīng)用戶的點(diǎn)擊事件。組件還支持快捷鍵操作，用戶可以通過(guò)按下指定的組合鍵來(lái)觸發(fā)對(duì)應(yīng)的菜單項(xiàng)。

圖片展示

一.代碼說(shuō)明

1.屬性定義

組件代碼解析：首先，我們需要在Vue組件中定義以下數(shù)據(jù)屬性：

isContextMenuVisible：控制右鍵菜單的顯示和隱藏。
contextMenuStyle：用于設(shè)置右鍵菜單的位置。
pressedKeys：存儲(chǔ)按下的組合鍵。
timeout：用于清除按鍵數(shù)組的定時(shí)器。

2.監(jiān)聽器定義

接下來(lái)，我們需要在組件的mounted鉤子函數(shù)中添加事件監(jiān)聽器，分別監(jiān)聽keydown、keyup和click事件。這些事件用于實(shí)現(xiàn)右鍵菜單的顯示、隱藏和快捷鍵操作。

 mounted() {
        window.addEventListener('keydown', this.handleKeyDown);
        window.addEventListener('keyup', this.handleKeyUp);
        window.addEventListener('click', this.handleClickOutside);
 },
 beforeUnmount() {
        window.removeEventListener('keydown', this.handleKeyDown);
        window.removeEventListener('keyup', this.handleKeyUp);
        window.removeEventListener('click', this.handleClickOutside);
 },

3.方法定義

在組件的methods中，我們定義了以下方法：

showContextMenu(event, options)：顯示右鍵菜單。該方法接受鼠標(biāo)事件對(duì)象和選項(xiàng)數(shù)組作為參數(shù)，并根據(jù)鼠標(biāo)位置計(jì)算菜單的位置。

 showContextMenu(event) {
     event.preventDefault(); // 阻止默認(rèn)右鍵菜單
     this.isContextMenuVisible = true;

     const menuWidth = 280 // 計(jì)算彈窗的寬度，可以根據(jù)實(shí)際情況獲取
     const windowWidth = window.innerWidth;
     const maxLeft = windowWidth - menuWidth; // 彈窗最大允許的 left 值

     let left = event.clientX;
     if (left > maxLeft) {
        left = maxLeft;
     }

     this.contextMenuStyle = {
        top: `${event.clientY}px`,
        left: `${left}px`
       };
},

hideContextMenu()：隱藏右鍵菜單。

 hideContextMenu() {
      this.isContextMenuVisible = false;
 },

handleOptionClick(action)：處理菜單項(xiàng)的點(diǎn)擊事件。該方法調(diào)用傳入的點(diǎn)擊事件處理函數(shù)，并隱藏右鍵菜單。

handleOptionClick(action) {
    this.hideContextMenu();
    action(); // 執(zhí)行傳入的方法
},

handleKeyDown(event)：按鍵按下事件。該方法將按下的鍵值存入pressedKeys數(shù)組，并設(shè)置定時(shí)器清空該數(shù)組。

  handleKeyDown(event) {
    const key = event.key.toLowerCase();
    if (this.pressedKeys.indexOf(key) === -1) {
       this.pressedKeys.push(key)
    }
  },

handleKeyUp(event)：按鍵松開事件。該方法通過(guò)調(diào)用matchShortcut方法匹配菜單項(xiàng)的快捷鍵，并執(zhí)行對(duì)應(yīng)的方法。

 handleKeyUp(event) {
   this.matchShortcut(event);
   this.pressedKeys = [];
 },

matchShortcut(event)：匹配菜單項(xiàng)的快捷鍵，并執(zhí)行對(duì)應(yīng)的方法。

 matchShortcut(event) {
      for (const option of this.options) {
       if (option.shortcut && this.isShortcutPressed(option.shortcutKey)) {
           event.preventDefault(); // 阻止默認(rèn)快捷鍵操作
           option.action(); // 執(zhí)行對(duì)應(yīng)選項(xiàng)的方法
           return;
          }
      }
},

isShortcutPressed(shortcutKey)：判斷按下的組合鍵是否與菜單項(xiàng)的快捷鍵匹配。

 isShortcutPressed(shortcutKey) {
   const keys = shortcutKey.toLowerCase().split('+').map(key => key.trim());
   if (keys.length !== this.pressedKeys.length) {
      return false;
   }
   for (const key of keys) {
     if (!this.pressedKeys.includes(key)) {
        return false;
       }
    }
     return true;
},

最后，我們還定義了一個(gè)handleClickOutside方法，用于處理點(diǎn)擊右鍵菜單外部的事件，當(dāng)用戶點(diǎn)擊菜單外部時(shí)，會(huì)隱藏菜單。

  handleClickOutside(event) {
     if (!this.$el.contains(event.target)) {
       this.hideContextMenu();
     }
  },

4.完整代碼

<template>
    <div id="contextMenu" v-show="isContextMenuVisible" :style="{ top: contextMenuStyle.top, left: contextMenuStyle.left }"
        class="context-menu">
        <div v-for="(option, index) in options" :key="index" @click="handleOptionClick(option.action)"
            class="context-menu-option">
            <span class="icon">{{ option.icon }}</span> <!-- 增加圖標(biāo) -->
            <span>{{ option.name }}</span>
            <span class="shortcut">{{ option.shortcut }}</span> <!-- 增加快捷鍵提示 -->
        </div>
    </div>
</template>
  
<script>
import { ref, nextTick } from 'vue'
/**
 * 右鍵菜單組件
 * options : 菜單配置信息  
 * 
 * option: { name: 菜單項(xiàng)名稱, action: 引用組件內(nèi)需要調(diào)用的事件, icon: 菜單圖標(biāo)  shortcut: 快捷鍵提示, shortcutKey: 快捷鍵按鈕組合，特殊符號(hào)需要使用英文名稱 },
 *         { name: '上一頁(yè)', action: this.prevPage, shortcut: "Alt+向上箭頭", shortcutKey: 'alt + arrowup' },
 * 
 * 引用組件 定義方法：  this.$refs.contextMenu.showContextMenu(event, this.contextMenuOption);
 * 
 */

export default {
    props: {
        options: {
            type: Array,
            required: true,
            default: []
        },
    },
    data() {
        return {
            isContextMenuVisible: false,
            contextMenuStyle: {
                top: '0px',
                left: '0px'
            },
            pressedKeys: [],
            timeout: null,
        };
    },
    mounted() {
        window.addEventListener('keydown', this.handleKeyDown);
        window.addEventListener('keyup', this.handleKeyUp);
        window.addEventListener('click', this.handleClickOutside);
    },
    beforeUnmount() {
        window.removeEventListener('keydown', this.handleKeyDown);
        window.removeEventListener('keyup', this.handleKeyUp);
        window.removeEventListener('click', this.handleClickOutside);
    },
    methods: {
        showContextMenu(event, options) {
            event.preventDefault(); // 阻止默認(rèn)右鍵菜單
            this.isContextMenuVisible = true;

            const menuWidth = 280 // 計(jì)算彈窗的寬度，可以根據(jù)實(shí)際情況獲取
            const windowWidth = window.innerWidth;
            const maxLeft = windowWidth - menuWidth; // 彈窗最大允許的 left 值

            let left = event.clientX;
            if (left > maxLeft) {
                left = maxLeft;
            }

            this.contextMenuStyle = {
                top: `${event.clientY}px`,
                left: `${left}px`
            };
            // this.options = options;
        },
        hideContextMenu() {
            this.isContextMenuVisible = false;
        },
        handleOptionClick(action) {
            this.hideContextMenu();
            action(); // 執(zhí)行傳入的方法
        },

        /**
         * 按鍵按下事件
         * @param {*} event 
         * 
         * 1s內(nèi)將按下的組合鍵裝入數(shù)組，避免沖突
         * 
         */
        handleKeyDown(event) {
            this.pressedKeys.push(event.key.toLowerCase());
            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
                this.pressedKeys = [];
            }, 1200);
        },

        /**
         * 按鍵松開事件
         * @param {*} event 
         * 
         */
        handleKeyUp(event) {
            this.matchShortcut(event);
        },

        /**
         * 用于快捷鍵匹配菜單項(xiàng)并執(zhí)行相應(yīng)的方法
         * @param {*} event 
         */
        matchShortcut(event) {
            for (const option of this.options) {
                if (option.shortcut && this.isShortcutPressed(option.shortcutKey)) {
                    event.preventDefault(); // 阻止默認(rèn)快捷鍵操作
                    option.action(); // 執(zhí)行對(duì)應(yīng)選項(xiàng)的方法
                    return;
                }
            }
        },

        /**
         * 按下按鍵 匹配菜單項(xiàng)快捷鍵
         * @param {*} shortcutKey 
         */
        isShortcutPressed(shortcutKey) {
            const keys = shortcutKey.toLowerCase().split('+').map(key => key.trim());
            if (keys.length !== this.pressedKeys.length) {
                return false;
            }
            for (const key of keys) {
                if (!this.pressedKeys.includes(key)) {
                    return false;
                }
            }
            return true;
        },

        handleClickOutside(event) {
            if (!this.$el.contains(event.target)) {
                this.hideContextMenu();
            }
        },
    },

};
</script>
  
<style>
.context-menu {
    position: fixed;
    z-index: 1000;
    min-width: 150px;
    max-width: 300px;
    background-color: white;
    border: none;
    border-radius: 3px;
    box-shadow: 0 0 5px #ccc;
}

/* .context-menu-option {
    height: 30px;
    font-size: 14px;
    padding: 5px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
} */


.context-menu-option {
    display: flex;
    font-size: 12px;
    align-items: center;
    justify-content: center;
    padding: 10px 5px;
    cursor: pointer;
}

.context-menu-option:not(:last-child) {
    border-bottom: 1px solid #eee;
}

.icon {
    margin-right: 20px;
    /* 控制圖標(biāo)與文字之間的間距 */
}

.shortcut {
    margin-right: 10px;
    margin-left: 40px;
    /* 將快捷鍵提示放置在右側(cè) */
    text-align: right;
    /* 文字靠右顯示 */
}


.context-menu-option:hover {
    background-color: #f0f0f0;
}
</style>

二. 組件使用

1. 取消默認(rèn)監(jiān)聽器

頁(yè)面需要添加監(jiān)聽器取消瀏覽器默認(rèn)的右鍵菜單

// 在頁(yè)面加載時(shí)添加事件監(jiān)聽器
document.addEventListener('contextmenu', function (event) {
    event.preventDefault(); // 取消默認(rèn)的右鍵菜單行為
});

2.頁(yè)面引用

使用右鍵菜單組件：要在你的Vue項(xiàng)目中使用右鍵菜單組件，需要完成以下步驟：

將上述代碼保存為一個(gè)名為ContextMenu.vue的組件文件。

在需要使用右鍵菜單的組件中，引入ContextMenu組件并注冊(cè)。

在data屬性中定義一個(gè)選項(xiàng)數(shù)組，包含所有菜單項(xiàng)的配置信息。

在需要觸發(fā)右鍵菜單的元素上，添加@contextmenu事件，調(diào)用showContextMenu方法顯示菜單。

<template>
  <div>
    <!-- 此處為觸發(fā)右鍵菜單的元素 -->
    <div @contextmenu="handleRightClick">
       右鍵點(diǎn)擊我
    </div>
    
    <!-- 引入ContextMenu組件 -->
    <ContextMenu ref="contextMenu" :options="options" />
  </div>
</template>

<script>
import ContextMenu from './ContextMenu.vue';

// 在頁(yè)面加載時(shí)添加事件監(jiān)聽器
document.addEventListener('contextmenu', function (event) {
    event.preventDefault(); // 取消默認(rèn)的右鍵菜單行為
});

export default {
  components: {
    ContextMenu,
  },
  data() {
    return {
     contextMenuOption: [  // 右鍵菜單選項(xiàng),shortcutKey需要按鍵的英文名稱 ...
                { name: '上一頁(yè)', action: this.prevPage, shortcut: "Alt+向上箭頭", shortcutKey: 'alt + arrowup' },
                { name: '下一頁(yè)', action: this.nextPage, shortcut: "Alt+向下箭頭", shortcutKey: 'alt + arrowdown' },
       ],
    };
  },
 methods: {
      handleRightClick(event) {
         this.$refs.contextMenu.showContextMenu(event, this.contextMenuOption);
      },
}
};
</script>

這個(gè)組件提供了靈活的配置選項(xiàng)，可以滿足不同場(chǎng)景下的需求?？梢愿鶕?jù)自己的項(xiàng)目需求進(jìn)行定制和擴(kuò)展