主要用到 oncontextmenu 事件：

oncontextmenu 事件在元素中用戶右擊鼠標時觸發(fā)并打開上下文菜單。

下面是自己寫的小demo：

// prevent 禁用瀏覽器默認的右鍵事件
<div @contextmenu.prevent="rightClick"><div class="rightList"><div class="list_item" @click="rightOneClick">你瞅啥</div><div class="list_item">抽你咋地</div><div class="list_item">你在瞅一下</div><div class="list_item">瞅瞅就瞅瞅</div></div>
</div><style>#app {position: relative;width: 100%;height: 100vh;background-color: #eee;box-sizing: border-box;padding: 30px;}.rightList {position: absolute;left: 100px;top: 100px;width: 70px;background-color: #fff;padding: 10px 0;display: none;}.list_item {width: 100%;height: 35px;line-height: 35px;text-align: center;font-size: 14px;font-weight: 500;color: #333;}.list_item:hover {background-color: #ddd;cursor: default;}</style>

rightClick(e) {// 獲取元素let rightlist = document.getElementsByClassName("rightList");// 再次點擊之前先清除之前的rightlist[0].style.display = 'none';// 點擊其他地方清除let coverHidden = () => {rightlist[0].style.display = 'none'document.removeEventListener('click',coverHidden,false)}let xw = e.offsetX;let yw = e.offsetY;rightlist[0].style.left = (xw - 35) + 'px';rightlist[0].style.top = (yw - 50) + 'px';// 顯示rightlist[0].style.display = 'block';document.addEventListener('click', coverHidden)return false;
},

注意事項：

每次點擊之前先清除之前的。

根據(jù)點擊右鍵元素來定義右鍵菜單展示位置。

需阻止瀏覽器默認的右鍵事件。