Vue3封装实现右键菜单组件_Javascript

实现思路

在 vue 中封装右键菜单组件时，可以通过 addeventlistener 监听 contextmenu 事件，也可以直接在标签上绑定 @contextmenu事件。由于我们在 vue 中封装组件，应当充分利用框架的优势，使用 @contextmenu 语法来让代码更简洁和易于维护。

封装组件

由于不同区域需要显示不同的菜单项，因此该组件的菜单项由外部传入。

defineexpose将变量、方法暴露出去，使得父组件能够访问这些暴露的内容

menu.vue

<template>
  <div class="menu" v-if="show" ref="menuref">
    <div
      class="menu-item"
      v-for="(item, index) in operation"
      :key="index"
      @click="handleclick(item.name)"
    >
      {
  
  { item.name }}
    </div>
  </div>
</template>
<script lang="ts" setup>
//友情提示：如果使用的不是naive-ui可以直接将有关naive-ui的代码注释掉
import { usemessage } from 'naive-ui'
import { nexttick, ref } from 'vue'
//使用naive-ui的消息提示框，要在根组件使用 <n-message-provider></>n-message-provider>
let message = usemessage()
//点击菜单项
const handleclick = (name) => {
  message.info(name)
  show.value = false
}
// 接收父组件传入的菜单项
defineprops({
  operation: {
    type: array,
    default: () => [],
  },
})
//用来显示、隐藏菜单
const show = ref(false)
let menuref = ref()
//获取并设置菜单的位置
const setposition = (x, y) => {
  nexttick(() => {
    let dom = menuref.value
    dom.style.left = x + 'px'
    dom.style.top = y + 'px'
    dom.style.height = 'fit-content'
    let height = dom.style.height
    dom.style.height = height
  })
}
//暴露数据
defineexpose({
  show,
  setposition,
})
</script>
<style lang="scss" scoped>
.menu {
  width: 100px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 10px;
  background: #ffffff;
  height: 0px;
  position: absolute;
  z-index: 1000;
  .menu-item {
    font-size: 16px;
    width: 100%;
    text-align: center;
    padding-top: 4px;
    padding-bottom: 4px;
    cursor: pointer;
    transition: 0.5s;
  }
  .menu-item:hover {
    background: #e2e2e2;
    transition: 0.5s;
  }
}
</style>

使用组件

在父组件使用组件在页面中，我们通常会划分多个区域，右键点击不同的区域时展示不同的菜单。在这种情况下，需要在事件处理函数中阻止浏览器的默认右键菜单弹出。此外，如果区域内嵌套了其他区域，还需要阻止事件冒泡，确保事件只在当前区域内处理，从而避免影响到其他区域的右键菜单。

index.vue

<template>
  <div class="contextmenu" @click="displaynonemenu()">
    <div
      class="box-1 box"
      @contextmenu="handlecontextmenu($event, 'operationref')"
    >
      <div class="text">操作区</div>
      <menu ref="operationref" :operation="operation"></menu>
      <div
        class="box-1-1"
        @contextmenu.stop="handlecontextmenu($event, 'operation2ref')"
      >
        <div class="text">操作分区</div>
        <menu ref="operation2ref" :operation="operation2"></menu>
      </div>
    </div>
    <div
      class="box-2 box"
      @contextmenu="handlecontextmenu($event, 'settingref')"
    >
      <div class="text">设置区</div>
      <menu ref="settingref" :operation="setting"></menu>
    </div>
    <div class="box-3 box" @contextmenu="handlecontextmenu($event, 'inforef')">
      <div class="text">信息区</div>
      <menu ref="inforef" :operation="info"></menu>
    </div>
    <div class="box-4 box" @contextmenu="handlecontextmenu($event, 'toolref')">
      <div class="text">工具区</div>
      <menu ref="toolref" :operation="tool"></menu>
    </div>
  </div>
</template>
<script lang="ts" setup>
import menu from './menu.vue'
import { ref } from 'vue'
//不同的菜单
let operation = [
  {
    name: '添加',
  },
  {
    name: '删除',
  },
  {
    name: '编辑',
  },
]
let operation2 = [
  {
    name: '查看详情',
  },
  {
    name: '查看用户',
  },
]
let setting = [
  {
    name: '修改属性',
  },
  {
    name: '更新',
  },
]
let info = [
  {
    name: '查看日志',
  },
  {
    name: '显示数据',
  },
]
let tool = [
  {
    name: '复制',
  },
  {
    name: '粘贴',
  },
  {
    name: '删除',
  },
]
 
// 给子组件绑定ref 获取组件实例
let operationref = ref()
let operation2ref = ref()
let settingref = ref()
let inforef = ref()
let toolref = ref()
// 缓存当前显示的菜单
let currentmenuref = ref()
//点击任何区域，隐藏菜单
const displaynonemenu = () => {
  if (currentmenuref.value) {
    currentmenuref.value.show = false
  }
}
//右键事件
const handlecontextmenu = (e, ref_) => {
  //阻止浏览器默认事件
  e.preventdefault()
  if (currentmenuref.value) {
//在显示下次菜单前，先隐藏上一次的菜单。
    currentmenuref.value.show = false 
  }
  let menuref = null
  switch (ref_) {
    case 'operationref':
      menuref = operationref.value
      break
    case 'operation2ref':
      menuref = operation2ref.value
      break
    case 'settingref':
      menuref = settingref.value
      break
    case 'inforef':
      menuref = inforef.value
      break
    case 'toolref':
      menuref = toolref.value
      break
  }
// 通过获取到的组件实例，设置菜单的显示和位置
  menuref.show = true
  menuref.setposition(e.offsetx, e.offsety)
  currentmenuref.value = menuref
}
</script>
<style lang="scss" scoped>
.contextmenu {
  height: 100%;
  width: 100%;
  background: palegreen;
  border-radius: 10px;
  display: flex;
  flex-flow: wrap;
  .box {
    position: relative;
  }
  .box-1 {
    width: 40%;
    height: 40%;
    background: #25a4bb;
    .box-1-1 {
      width: 50%;
      height: 50%;
      background: coral;
    }
  }
  .box-2 {
    width: 60%;
    height: 40%;
    background: #cacaca;
  }
  .box-3 {
    width: 60%;
    height: 60%;
    background: palevioletred;
  }
  .box-4 {
    width: 40%;
    height: 60%;
    background: paleturquoise;
  }
  .text {
    font-weight: 600;
    font-size: 20px;
    color: #333333;
    text-align: center;
    font-family: 'avenir', helvetica, arial, sans-serif;
    margin-top: 10px;
  }
}
</style>