React:tabs或标签页自定义右击菜单内容,支持内嵌iframe关闭菜单方案

React:tabs或标签页自定义右击菜单内容,支持内嵌iframe关闭菜单方案

不管是react、vue还是原生js,原理是一样的。
注意如果内嵌iframe情况下,iframe无法使用事件监听,但是可以使用iframe的任何点击行为都会往父级window通信,使用window的message事件监听即可。

场景

前端自定义标签页,一个标签对应一个路由页面,通过切换标签快速切换不同应用或者页面

代码

变量
state = {contextMenuIndex: '', // 右击菜单索引contextMenuPosition: { // 右击菜单定位信息clientX: '',clientY: '',},visiableContextMenu: false, // 右击菜单是否显示};
事件加载
componentDidMount() {// 监听当前document的鼠标右击事件document.addEventListener('contextmenu', (event) => {event.preventDefault();if (this.state.visiableContextMenu === -1) {return;}this.setState({contextMenuPosition: {clientX: `${event.clientX}px`,clientY: `${event.clientY}px`,},});});// 监听当前document的鼠标点击事件,用于关闭自定义菜单document.addEventListener('click', () => {this.setState({visiableContextMenu: false,});});// 监听当前window的messag事件(有内嵌iframe时使用,若无可不使用)// 无法使用iframe监听,可以通过和父级window的消息通信达到目的。window.addEventListener('message', () => {this.setState({visiableContextMenu: false,});});}
标签
		<div>{/* ... */}{/* 自定义右击菜单 */}{visiableContextMenu ? (<MenuclassName="contextMenuList"style={{ left: clientX, top: clientY }}><Menu.Item onClick={() => this.hadleCloseByIndex([contextMenuIndex])}>关闭当前</Menu.Item><Menu.Item onClick={() => this.closeLeft()}>关闭左侧</Menu.Item><Menu.Item onClick={() => this.closeRight()}>关闭右侧</Menu.Item><Menu.Item onClick={() => this.closeAll()}>关闭全部</Menu.Item></Menu>) : ('')}</div>
完整案例代码
import React, { Component } from 'react';
import { SyncOutlined } from '@ant-design/icons';
import { Tabs, Menu } from 'antd';
import store from 'store';// styl
import './IndexTabsNavigation.styl';class IndexTabsNavigation extends Component {state = {contextMenuIndex: '',contextMenuPosition: {clientX: '',clientY: '',},visiableContextMenu: false,};onClick(id) {this.props.updateOpenModuleId(id);}onEdit(targetKey, action) {// e.stopPropagation();if (action === 'remove') {// 多租户首页最后一个数据不能删除if (this.props.isTenant && this.props.openModule.length === 1) return;const index = this.props.openModule.findIndex((item) => String(item.id) === String(targetKey),);this.props.removeModule(targetKey, index);}}onReset(item, index, e) {e.stopPropagation();const getIframe = document.querySelectorAll('.inner-iframe')[index];if (getIframe) {getIframe.setAttribute('src', `${item.path}&_t=${Math.random() * 1e18}`);}}componentDidMount() {document.addEventListener('contextmenu', (event) => {event.preventDefault();if (this.state.visiableContextMenu === -1) {return;}this.setState({contextMenuPosition: {clientX: `${event.clientX}px`,clientY: `${event.clientY}px`,},});});document.addEventListener('click', () => {this.setState({visiableContextMenu: false,});});window.addEventListener('message', () => {this.setState({visiableContextMenu: false,});});}// 设置右击菜单onContextMenuFun(contextMenuIndex) {this.setState({contextMenuIndex,visiableContextMenu: true,});}hadleCloseByIndex(indexList) {if (this.props.isTenant && this.props.openModule.length === 1) return;indexList.map((index, idx) => {const item = this.props.openModule[index];setTimeout(() => {this.props.removeModule(item.id, index);}, 100 * idx)})}// 关闭左侧closeLeft() {const { contextMenuIndex } = this.state;if (contextMenuIndex <= 0) return;const closeList = Array.from({length: contextMenuIndex}).map((item, index) => index)this.props.removeModuleListByIndex(closeList);}// 关闭右侧closeRight() {const { contextMenuIndex } = this.state;const openModule = this.props.openModule;const delLength = openModule.length - 1 - contextMenuIndex;if (delLength <= 0) return;const closeList = Array.from({length: delLength}).map((item, index) => item = contextMenuIndex + index + 1)this.props.removeModuleListByIndex(closeList);setTimeout(() => {// 判断当前tabs是否有高亮const newOpenModule = [...this.props.openModule];const openModuleOpenInfo = store.get('openModuleOpenInfo') || {};const openObj = newOpenModule.find((item) => String(item.id) === String(openModuleOpenInfo.id),);if (!openObj) {this.props.updateOpenModuleId(newOpenModule[newOpenModule.length - 1].id);}}, 300)}// 关闭全部closeAll() {const openModule = this.props.openModule;if (openModule.length - 1 <= 0) return;const openModuleOpenInfo = store.get('openModuleOpenInfo') || {};const openIndex = openModule.findIndex((item) => String(item.id) === String(openModuleOpenInfo.id),);const closeList = openModule.map((item, index) => index).filter((item, index) => index !== openIndex)this.props.removeModuleListByIndex(closeList);}render() {const {contextMenuIndex,visiableContextMenu,contextMenuPosition: { clientX, clientY },} = this.state;return (<div className="index-tabs-navigation-box"><divref={(indexTabs) => (this.indexTabs = indexTabs)}className={`${this.props.isTenant? 'index-tabs-navigation-isTenant': 'index-tabs-navigation'}`}><TabshideAddtype="editable-card"activeKey={String(this.props.openModuleId)}onChange={this.onClick.bind(this)}onEdit={this.onEdit.bind(this)}items={this.props.openModule.map((item, index) => {return {key: String(item.id),label: (<divclassName="customLabel"onContextMenu={this.onContextMenuFun.bind(this,index,)}><span className="customLabel-title">{item.title}</span>{String(this.props.openModuleId) === String(item.id) ? (<SyncOutlinedonClick={this.onReset.bind(this, item, index)}className="customLabel-reset"/>) : ('')}</div>),};})}/>{/* 自定义右击菜单 */}{visiableContextMenu ? (<MenuclassName="contextMenuList"style={{ left: clientX, top: clientY }}><Menu.Item onClick={() => this.hadleCloseByIndex([contextMenuIndex])}>关闭当前</Menu.Item><Menu.Item onClick={() => this.closeLeft()}>关闭左侧</Menu.Item><Menu.Item onClick={() => this.closeRight()}>关闭右侧</Menu.Item><Menu.Item onClick={() => this.closeAll()}>关闭全部</Menu.Item></Menu>) : ('')}</div></div>);}
}export default IndexTabsNavigation;

样式代码styl:

.contextMenuListposition: fixedz-index 1001border: solid 1px #e9ecf0padding: 5px 0.ant-menu-itemmargin-bottom: 0 !importantpadding: 5px 12px;line-height: 22px;height: 32px;margin-top: 0 !important.ant-menu-title-contentmargin-right: 5px !important;
案例效果图

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/37372.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

入门Java爬虫:认识其基本概念和应用方法

Java爬虫初探&#xff1a;了解它的基本概念与用途&#xff0c;需要具体代码示例 随着互联网的快速发展&#xff0c;获取并处理大量的数据成为企业和个人不可或缺的一项任务。而爬虫&#xff08;Web Scraping&#xff09;作为一种自动化的数据获取方法&#xff0c;不仅能够快速…

Pegasus平台Pytorch源码编译

和Drive PX2的编译没有什么区别 源码编译步骤 注意&#xff1a;当完全按照以下步骤进行编译时&#xff0c;如果出现错误&#xff0c;注意检查CUDA版本、对应的库是否存在 # Download PyTorch sources git clone --recursive --branch <version> http://github.com/pyt…

vtk渲染过程

vtk渲染 VTK的渲染过程主要包括创建渲染器、添加演员到渲染器、创建渲染窗口、创建交互器、将渲染器添加到渲染窗口中、将交互器与渲染窗口关联、启动交互器循环等步骤。12 创建渲染器(Renderer): 首先&#xff0c;需要创建一个或多个渲染器。渲染器是VTK中的一个重要组件&am…

在Ubuntu 16.04上安装和配置Elasticsearch的方法

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 简介 Elasticsearch 是一个用于实时分布式搜索和数据分析的平台。它因易用性、强大功能和可扩展性而备受欢迎。 Elasticsearch 支持 R…

vue2(vue-cli3x[vue.config.js])使用cesium新版(1.117.0)配置过程

看来很多解决方法都没有办法&#xff0c;最后终于。呜呜呜呜 这里我用的是vue-cli去搭建的项目的vue2 项目&#xff0c;其实不建议用vue2搭配cesium。因为目前cesium停止了对vue2的版本更新&#xff0c;现在默认安装都是vue3版本&#xff0c;因此需要控制版本&#xff0c;否则…

Kylin支持哪些数据源,它们之间有什么区别

Apache Kylin支持多种数据源&#xff0c;这些数据源为Kylin提供了从不同类型和存储方式的数据中获取和处理数据的能力。以下是Kylin支持的主要数据源及其之间的区别&#xff1a; Apache Hadoop HDFS&#xff1a; 描述&#xff1a;HDFS是Hadoop生态系统中用于存储大数据的文件系…

Node.js简介

一&#xff1a;Node.js简介 Node.js是一个跨平台的JavaScript运行环境&#xff0c;使开发者可以搭建服务器端的JavaScript应用程序 作用&#xff1a;使用Node.js编写服务器端程序 编写数据接口&#xff0c;提供网页资源浏览功能有利于前端工程化&#xff0c;可以集成各种开发…

鸿蒙系统的前世今生

2019年8月9日&#xff0c;华为在开发者大会上发布EMUI 10的同时宣告了HarmonyOS 1.0的诞生。鸿蒙诞生的背景是&#xff0c;美限制华为与谷歌以及其他美国科技公司开展业务。 前华为开发者大会上&#xff0c;HarmonyOS NEXT&#xff08;原生鸿蒙&#xff09;正式公布&#xff0c…

【力扣高频题】011. 盛最多水的容器

前面的算法文章&#xff0c;更新了许多 专题系列 。包括&#xff1a;滑动窗口、动态规划、加强堆、二叉树递归套路 等。 还没读过的小伙伴可以关注一下&#xff0c;在主页中点击对应链接查看哦~ 接下来的一段时间&#xff0c;将持续 「力扣高频题」 系列文章&#xff0c;想刷 …

Java基础知识-线程池

1、为什么要用线程池&#xff1f; 创建线程要花费昂贵的资源和时间&#xff0c;如果任务来了才创建线程那么响应时间会变长&#xff0c;而且一个进程能创建的线程数 有限。为了避免这些问题&#xff0c;在程序启动的时候就创建若干线程来响应处理&#xff0c;它们被称为线程池&…

使用pywinauto自动重连easyconnect

启动easyconnect后&#xff0c;运行该脚本&#xff0c;实现自动重连。需要填一下连接的地址&#xff0c;用户名和密码(替换一下脚本里的xxx) from pywinauto import application from pywinauto import timings import time# 初始化应用程序对象 app1 application.Applicatio…

2710. 移除字符串中的尾随零 Easy

给你一个用字符串表示的正整数 num &#xff0c;请你以字符串形式返回不含尾随零的整数 num 。 示例 1&#xff1a; 输入&#xff1a;num "51230100" 输出&#xff1a;"512301" 解释&#xff1a;整数 "51230100" 有 2 个尾随零&#xff0c;移…

idea2024使用springboot3.x系列新建java项目,使用jdk17,启动项目报错

身为一名开发人员&#xff0c;敲代码无数&#xff0c;竟被一个小小启动给我卡了大半天&#xff0c;太丢脸了 报错一&#xff1a;Field infoSysRepository in com.erectile.Impl.PersonalInfoServiceImpl required a bean of type ‘com.erectile.jpa.repository.InfoSysReposit…

Spring:Spring中分布式事务解决方案

一、前言 在Spring中&#xff0c;分布式事务是指涉及多个数据库或系统的事务处理&#xff0c;其中事务的参与者、支持事务的服务器、资源管理器以及事务管理器位于分布式系统的不同节点上。这样的架构使得两个或多个网络计算机上的数据能够被访问并更新&#xff0c;同时将这些操…

使用通用的响应格式

使用泛型响应类&#xff08;或者类似的响应封装类&#xff09;在网络编程和API设计中有很多好处&#xff0c;包括但不限于以下几点&#xff1a; 统一响应格式&#xff1a; 使用R<T>可以确保API的所有响应都遵循相同的格式&#xff0c;这有助于客户端更容易地解析和处理响…

IP地址与在线教育平台资源分配优化

IP地址的资源分配与优化策略可以帮助在线教育平台提供更高质量、稳定且个性化的教育服务。 IP地址作为网络设备的标识符&#xff0c;能够为在线教育平台提供有关学生地理位置和网络环境信息。通过对学生IP地址的分析&#xff0c;平台可以初步了解学生所在的地区、网络服务提供商…

回收站的照片删除了怎么找回?

大家在日常使用电脑的过程中&#xff0c;难免会遇到不小心删除重要文件的情况&#xff0c;尤其是珍贵的照片。当我们意识到误删照片时&#xff0c;第一反应通常是去回收站找回。然而&#xff0c;如果连回收站的照片都被删除了&#xff0c;该如何恢复呢&#xff1f;本文将详细探…

【MySQL】事务的快照生成时间点和薛定谔的猫相关?

概述 最近因为工作需要&#xff0c;对MySQL的事务处理进行了一系列测试验证&#xff0c;其中&#xff0c;对于MySQL的事务到底时什么时候生成了数据的快照&#xff0c;结果似乎跟薛定谔的猫理念很像&#xff0c;很有意思&#xff1b;过程我贴出来&#xff0c;有兴趣的朋友可以一…

Python提供API给JAVA调用,实现Python和Java之间的交互

一、Java 调用Python 提供的API接口&#xff0c;有多种方法&#xff0c;本文通过Python 提供的Rest API进行调用 二、在Python中创建一个REST API&#xff0c;你可以使用许多框架&#xff0c;其中两个最流行的框架是Flask和Django REST framework。这两个框架都提供了创建REST…

Dockerfile详情,Django项目中使用Dockerfile

Dockerfile详情&#xff0c;Django项目中使用Dockerfile 目录 Dockerfile详情&#xff0c;Django项目中使用Dockerfile介绍常用指令Dokcerfile部署Django项目安装Docker获取项目源码Dockerfile文件构建Docker镜像运行Docker容器 介绍 Dockerfile是一个文本文件&#xff0c;一般…