vue实现点击右键出现自定义操作菜单

一、前言

在这里插入图片描述

实现像微信一样的点击右键后出现操作菜单，对选中的数据项进行相应的操作，接下来介绍使用原生vue实现右键菜单的方法。

二、页面代码

   
     <!-- {{ item.name }} -->
     
       
         
           
         
         {{ item.code }}
       
       
         {{ filterTime(item.maxCreateTime) }}
         
           
           
         
       
     
   
   'left': menuLeft + 'px', 'top': menuTop + 'px'}">
     
       置顶
       取消置顶
       
       
       
         <!-- 请确定是否删除？ -->
         
           请确定是否删除？
           取消
           确定
         
         
           {}">删除
         
       
     
   
 

.menu_box {
  position: fixed;
  z-index: 1004;
  background-color: #fff;
  // border-radius: 5px;
  .menu{
    width: 100px;
    text-align: left;
    // padding: 5px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    .menu_item{
      height: 24px;
      line-height: 22px;
      // margin-top: 5px;
    }
    .item_text{
      color: #171A1D;
      cursor: pointer;
      padding: 4px 20px;
      // border-radius: 3px;
      transition: all .2s ease-in;
    }
    .item_text:hover {
      background-color: #E9EAEC;
    }
  }
}

@contextmenu.prevent.stop 为阻止浏览器的右键点击菜单事件
isShowMenu: 来控制菜单的显示

三、页面逻辑

同时我们要为其出现的地方进行调整 menuTop，menuLeft，在展示 menu 的时候我们将 event 的页面位置属性 e.pageX 和 e.pageX 拿来赋值
我们需要在页面创建的时候增加 click 和 mousedonw 的监听，这样就可以在我们点击别的地方的时候将菜单隐藏

// 右键菜单
const isShowMenu = ref(false) // 控制是否显示右键菜单
const menuLeft = ref(0)
const menuTop = ref(0)
const openMenuConfigId = ref(0) // 打开右键菜单的那一行的configId
const isNowTop = ref(false) // 是否已置顶
const showMenu = async(e:any, index:number, configId:number):Promise => {
  // console.log(e, index, configId)
  // eslint-disable-next-line
  const data = await window.app.windowGetData(store.userBaseInfo.username + '.data.warn')
  data.forEach((item:any) => {
    if (item.configId === configId) {
      if (item.isTop) {
        isNowTop.value = true
      } else {
        isNowTop.value = false
      }
    }
  })
  openMenuConfigId.value = configId
  isShowMenu.value = true
  menuLeft.value = e.pageX
  menuTop.value = e.pageY
}

// 置顶
const stick = async(status:boolean):Promise => {
  // eslint-disable-next-line
  let data = await window.app.windowGetData(store.userBaseInfo.username + '.data.warn')
  data.forEach((item:any) => {
    if (item.configId === openMenuConfigId.value) {
      item.isTop = status
    }
  })
  const topList:any[] = []
  data.forEach((item:any) => {
    if (item.isTop) {
      topList.push(item)
    }
  })
  topList.sort((a:any, b:any) => (b.maxCreateTime - a.maxCreateTime))
  data = data.filter((item:any) => (item.isTop === false))
  data.sort((a:any, b:any) => (b.maxCreateTime - a.maxCreateTime))
  data = topList.concat(data)

  warnList = JSON.parse(JSON.stringify(data))
  $forceUpdate()
  // eslint-disable-next-line
  window.app.windowStoreData(store.userBaseInfo.username + '.data.warn', data)
  clockMenu()
}

// 删除
const showDelPop = ref(false)
const deleteList = async():Promise => {
  // eslint-disable-next-line
  let data = await window.app.windowGetData(store.userBaseInfo.username + '.data.warn')
  data = data.filter((item:any) => (item.configId !== openMenuConfigId.value))

  warnList = JSON.parse(JSON.stringify(data))
  $forceUpdate()
  // eslint-disable-next-line
  window.app.windowStoreData(store.userBaseInfo.username + '.data.warn', data)
  clockMenu()
}
// 关闭菜单
const clockMenu = ():void => {
  isShowMenu.value = false
}

// 失去焦点时关闭右击菜单

mounted() {
  //失去焦点时关闭右击菜单
  document.addEventListener("click", (e) => {
    if (!this.$refs.rightMenu.contains(e.target))
      this.rightMenuVisible = false;
  });
}