转载请注明原文地址
大体思路类似,具体实现在于控件是否提供了右键菜单的回调方法. 右键菜单的样式也可以根据自己需求进行变更.

新版本

基于vue3
支持自动调整偏移量,防止菜单超出屏幕

封装rightMenu组件

<!--* @Description: 右键菜单* @Author: r_yuesheng* @Date: 2021-08-09 16:13:32* @LastEditTime: 2021-011-09 17:33:07* @LastEditors: r_yuesheng
-->
<template><div><ul :id="rightType" class="rightmenu" v-show="menuVisible"><liclass="menu_item":style="menu.customStyle"v-for="(menu, menuIndex) in menuOptions":key="menuIndex"@click="menuClick(menu)"><i :class="menu.icon"></i><span>{{ menu.label }}</span></li></ul></div>
</template><script>
import { reactive, toRefs, watch } from "vue";
export default {emits: ["backEvent"],name: "rightMenu",props: {//右键类型,目前只有两种 table和treerightType: String,//禁用按钮menuDisabled: {type: Array,default: () => {},},//是否显示menuVisible: Boolean,//鼠标事件menuEvent: Object,//自定义右键菜单内容menuOptions: {type: Array,default: () => {return [{label: "新建",icon: "el-icon-folder-add r_menu_icon",event: "create",},];},},},setup(props, { emit }) {const state = reactive({listType: ["table", "tree"],currViewPortHeight: document.body.clientHeight,menuLenth: 100,});watch(() => props.menuEvent,(value) => {state.listType.forEach((item) => {const menu = document.querySelector(`#${item}`);if (menu) {menu.style.display = "none";}});initMenuDisable();state.currViewPortHeight = document.body.clientHeight;state.menuLenth = props.menuOptions.length * 38;// const tempMouseEvent = value.MouseEvent;treeRightClick();});watch(() => props.menuVisible,(value) => {if (!value) {foo();}});function menuClick(type) {emit("backEvent", type.event);foo();}function treeRightClick() {const { MouseEvent } = props.menuEvent;const menu = document.querySelector(`#${props.rightType}`);menu.style.display = "";window.event.returnValue = false;const tempCurrMenuHeight = MouseEvent.clientY + state.menuLenth;menu.style.left = `${MouseEvent.clientX + 10}px`;if (tempCurrMenuHeight > state.currViewPortHeight) {menu.style.top = `${state.currViewPortHeight - state.menuLenth - 50}px`;} else {menu.style.top = `${MouseEvent.clientY - 40}px`;}document.addEventListener("click", foo);}function foo() {emit("backEvent", null);document.removeEventListener("click", foo);}function initMenuDisable() {props.menuOptions.forEach((item) => {if (props.menuDisabled.includes(item.event)) {item.customStyle = "pointer-events:none;color:#c5cbd8;";} else {item.customStyle = "";}});}return {...toRefs(state),menuClick,foo,treeRightClick,};},
};
</script><style scoped>
.rightmenu {padding: 0 15px;position: absolute;border-radius: 4px;background-color: #fff;padding: 5px 0;text-align: left;box-shadow: 0 3px 6px 3px #dbdde5;z-index: 2;color: #4d556f;
}
.rightmenu .menu_item {display: block;line-height: 28px;text-align: left;padding: 4px 12px;font-size: 14px;
}
.rightmenu li:hover {background-color: #4671ff;color: #fff;cursor: pointer;transition: ease all 0.2s;
}
</style>

页面使用

基于el-tree使用

<template><RightMenurightType="tree" :menuVisible="showTreeMenu":menuEvent="objectTreeMenuEvent":menuOptions="objMenuOptions"@backEvent="backEvent"></RightMenu>
</template>
<script>
import RightMenu from './rightMenu.vue';//引入右键菜单组件
</script>

基于el-table使用

  <TableRightMenu:menuVisible="tableRightMenu":menuDisabled="listMenuDisabled"rightType="table":menuEvent="objectTableMenuEvent":menuOptions="objMenuOptions"@backEvent="backEvent"></TableRightMenu>

旧版本

1.右键菜单的样式

    <div v-show="menuVisible"><ul id="menu" class="menu"><li class="menu__item">新增</li><li class="menu__item">重命名</li><li class="menu__item">删除</li></ul></div>.menu__item {display: block;line-height: 20px;text-align: center;margin:10px;cursor: default;
}
.menu__item:hover{color: #FF0000;
}.menu {height: auto;width: auto;position: absolute;font-size: 14px;text-align: left;border-radius: 10px;border: 1px solid #c1c1c1;background-color: #ffffff;
}li:hover {background-color: #E0E0E2;color: white;
}

2.公用方法

method:{rightClick(row, event) {this.menuVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是truethis.menuVisible = true; // 显示模态窗口，跳出自定义菜单栏var menu = document.querySelector('#menu');this.styleMenu(menu);},foo() {// 取消鼠标监听事件 菜单栏this.menuVisible = false;document.removeEventListener('click', this.foo); // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了},styleMenu(menu) {if (event.clientX > 1800) {menu.style.left = event.clientX - 100 + 'px';} else {menu.style.left = event.clientX + 1 + 'px';}document.addEventListener('click', this.foo); // 给整个document新增监听鼠标事件，点击任何位置执行foo方法if (event.clientY > 700) {menu.style.top = event.clientY - 30 + 'px';} else {menu.style.top = event.clientY - 10 + 'px';}}
}

3.选择一种方式,自行绑定数据

第一种: el-tree 树形式

 <el-tree :data="templateData" :prop="templateData.tempName"  @node-contextmenu="rightClick"></el-tree>

第二种 el-table 表格形式

<el-table :data="Data"   @row-contextmenu="rightClick"></el-table>

爱你三千遍❤

vue+element-UI实现右键菜单相关推荐

vue element ui下拉菜单和不是table列表全选功能问题解决方案
这半个月都在折腾vue的项目,虽然不是很复杂,但对于刚入门的小白来说,踩到的坑不少,常常因为一个小问题就得浪费好久问题,不过娃不在身边,晚上和周末可以继续研究,趁睡觉前,把今天遇到的问题给总结一下,做 ...
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
Vue + Element UI 实现登陆注册基本demo实例
Vue + Element UI 实现权限管理系统前端篇(二):Vue + Element 案例导入项目打开 Visual Studio Code,File --> add Folder ...
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单输入过滤框以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...

vue+element-UI实现右键菜单

新版本

封装rightMenu组件

页面使用

基于el-tree使用

基于el-table使用

旧版本

vue+element-UI实现右键菜单相关推荐

最新文章

热门文章