快捷導(dǎo)航

vue點(diǎn)擊右鍵出現(xiàn)自定義操作菜單實(shí)現(xiàn)代碼

更新時(shí)間：2023年08月04日 10:26:30 作者：老電影故事

這篇文章主要給大家介紹了關(guān)于vue點(diǎn)擊右鍵出現(xiàn)自定義操作菜單實(shí)現(xiàn)的相關(guān)資料,在網(wǎng)頁(yè)中我們也希望可以像桌面軟件一樣,點(diǎn)擊右鍵后出現(xiàn)操作菜單,對(duì)選中的數(shù)據(jù)項(xiàng)進(jìn)行相應(yīng)的操作,需要的朋友可以參考下

一、前言

實(shí)現(xiàn)像微信一樣的點(diǎn)擊右鍵后出現(xiàn)操作菜單，對(duì)選中的數(shù)據(jù)項(xiàng)進(jìn)行相應(yīng)的操作，接下來(lái)介紹使用原生vue實(shí)現(xiàn)右鍵菜單的方法。

二、頁(yè)面代碼

<div v-if="isShow" class="warn_box">
   <div
     v-for="(item, index) in warnList"
     :key="index"
     :class="{ 'list': true, 'isTop': item.isTop, 'isSelected': activeIndex === index }"
     @click="itemClick(index, Number(item.code))"
     @contextmenu.prevent.stop="showMenu($event, index, item.configId)"
   >
     <!-- {{ item.name }} -->
     <div
       class="all"
     >
       <div class="left">
         <div class="left_top">
           <EllipsisPop :content="item.name" :row-num="1" width="180px"></EllipsisPop>
         </div>
         <div class="left_bottom">{{ item.code }}</div>
       </div>
       <div class="right">
         <div class="right_top">{{ filterTime(item.maxCreateTime) }}</div>
         <div
           v-if="item.untreatedTotal"
           class="right_bottom"
         >
           <el-badge
             :value="item.untreatedTotal"
             :max="999"
             class="badge"
           >
           </el-badge>
         </div>
       </div>
     </div>
   </div>
   <div v-if="isShowMenu" class="menu_box" :style="{'left': menuLeft + 'px', 'top': menuTop + 'px'}">
     <div class="menu">
       <div v-if="!isNowTop" class="menu_item item_text" @click.stop="stick(true)">置頂</div>
       <div v-else class="menu_item item_text" @click.stop="stick(false)">取消置頂</div>
       <!-- <div class="menu_item item_text" @click.stop="deleteList">刪除</div> -->
       <el-popover v-model="showDelPop" placement="top" width="160" trigger="click">
         <!-- <p>請(qǐng)確定是否刪除？</p> -->
         <div style="text-align: center; margin: 0">
           <p>請(qǐng)確定是否刪除？</p>
           <el-button size="small" @click="showDelPop = false">取消</el-button>
           <el-button type="primary" size="small" @click.stop="deleteList">確定</el-button>
         </div>
         <template #reference>
           <div class="menu-item item_text" @click.stop="()=>{}">刪除</div>
         </template>
       </el-popover>
     </div>
   </div>
 </div>
.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 為阻止瀏覽器的右鍵點(diǎn)擊菜單事件
isShowMenu: 來(lái)控制菜單的顯示

三、頁(yè)面邏輯

同時(shí)我們要為其出現(xiàn)的地方進(jìn)行調(diào)整 menuTop，menuLeft，在展示 menu 的時(shí)候我們將 event 的頁(yè)面位置屬性 e.pageX 和 e.pageX 拿來(lái)賦值

我們需要在頁(yè)面創(chuàng)建的時(shí)候增加 click 和 mousedonw 的監(jiān)聽(tīng)，這樣就可以在我們點(diǎn)擊別的地方的時(shí)候?qū)⒉藛坞[藏

// 右鍵菜單
const isShowMenu = ref(false) // 控制是否顯示右鍵菜單
const menuLeft = ref(0)
const menuTop = ref(0)
const openMenuConfigId = ref(0) // 打開(kāi)右鍵菜單的那一行的configId
const isNowTop = ref(false) // 是否已置頂
const showMenu = async(e:any, index:number, configId:number):Promise<void> => {
  // 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<void> => {
  // 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<void> => {
  // 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()
}
// 關(guān)閉菜單
const clockMenu = ():void => {
  isShowMenu.value = false
}

// 失去焦點(diǎn)時(shí)關(guān)閉右擊菜單

mounted() {
  //失去焦點(diǎn)時(shí)關(guān)閉右擊菜單
  document.addEventListener("click", (e) => {
    if (!this.$refs.rightMenu.contains(e.target))
      this.rightMenuVisible = false;
  });
}

四、總結(jié)

到此這篇關(guān)于vue點(diǎn)擊右鍵出現(xiàn)自定義操作菜單實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue點(diǎn)擊右鍵自定義操作菜單內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: