自定义右键菜单组件

vue3基础下：

// 右键菜单组件
<template>
  <div class="mouse-menu" :style="mouse_menu_style">
    <div class="mouse-menu-item" v-for="(item, index) in mouseMenu" :key="index" @click="otherMethod(item.type)">{{item.name}}</div>
    <div class="mouse-menu-item mouse-menu-delete" v-show="props.isDelete" @click="deleteMthod">删除</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps({
  mouseMenu: Object, // 鼠标右键自定义菜单
  mouse_menu_style: Object, // 鼠标右键自定义菜单style
  isDelete: Boolean, // 是否需要含有删除操作
})
const emit = defineEmits(['otherMehod','deleteMthod'])
// 其他自定义操作
const otherMethod = (type) => {
  console.log('type',type)
  emit('otherMethod', type)
}
// 删除操作
const deleteMthod = () => {
  emit('deleteMthod')
}
</script>

<style lang="scss" scoped>
.mouse-menu{
  position: fixed;
  visibility: hidden;
  background-color: #707070;
  border-radius: 0.1vw;
  z-index: 9999;
  .mouse-menu-item{
    width: 3.4375vw;
    height: 1.458vw;
    line-height: 1.458vw;
    text-align: center;
    cursor: pointer;
    user-select: none;
  }
  .mouse-menu-delete{
    color: #FF3F3F;
  }
  .mouse-menu-item:hover{
    background-color: rgba(255, 255, 255, 0.34);
  }
  .mouse-menu-item:active{
    background-color: rgba(255, 255, 255, 0.34);
  }
}
</style>

其他组件调用：

// ...
<div @contextmenu="contextmenu(data)"></div>
<mouseMenu :mouseMenu="mouseMenuList" :isDelete="true" :mouse_menu_style="mouse_menu_style" @deleteMthod="deleteMthod" @otherMethod="editMethod"></mouseMenu>
// ...


// 右键事件
// 右键自定义菜单
const mouseMenuList = ref([{ name: '编辑', type: 'edit' }])
const mouse_menu_style = ref({})
const contextmenu = (data) => {
  mouse_menu_style.value = {
    top: event.clientY+'px',
    left: event.clientX+'px',
    visibility: 'visible'
  }
  // 阻止右键默认行为
  event.preventDefault()
  // 点击页面其他地方隐藏自定义菜单
  document.onclick = (e) => {
    closeMenu()
  }
}
// 关闭右键菜单
const closeMenu = () => {
  mouse_menu_style.value = {
    visibility: 'hidden'
  }
}
// 右键其他操作，由type区分
const editMethod = (type) => {
  
}
// 右键删除操作
const deleteMthod= () => {
  
}