您现在的位置是：首页 > 技术教程正文

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

admin 阅读： 2024-03-29

后台-插件-广告管理-内容页头部广告（手机）

一、前言

在这里插入图片描述

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

二、页面代码

<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> <el-popover v-model="showDelPop" placement="top" width="160" trigger="click"> <div style="text-align: center; margin: 0"> <p>请确定是否删除？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 为阻止浏览器的右键点击菜单事件
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<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() } // 关闭菜单 const clockMenu = ():void => { isShowMenu.value = false }

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

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

四、希望能帮到你

标签:

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

在线投稿：投稿站长QQ：1888636

后台-插件-广告管理-内容页尾部广告（手机）