当前位置: 首页 > news >正文

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.lryc.cn/news/385384.html

相关文章:

  • Taro +vue3 中的微信小程序中的分享
  • 视频监控EasyCVR视频汇聚/智能边缘网关:EasySearch无法探测到服务器如何处理?
  • openlayer 鼠标点击船舶,打开船舶简单弹框
  • 数据挖掘常见算法(关联)
  • vue项目集成CanvasEditor实现Word在线编辑器
  • Redis Stream Redisson Stream
  • threadX netx 设置IP地址以及获取IP地址
  • 计算机毕业设计hadoop+spark+hive知识图谱医生推荐系统 医生数据分析可视化大屏 医生爬虫 医疗可视化 医生大数据 机器学习 大数据毕业设计
  • lammps已经运算结束,有数据忘记算:rerun 命令
  • CARLA自动驾驶模拟器基础
  • 华为HCIP Datacom H12-821 卷16
  • Python学习打卡:day17
  • Spring Cloud Gateway 与 Nacos 的完美结合
  • vue2 element ui 表单 动态增加表单项 表单项值不可重复 select多选
  • [数据集][目标检测]电力场景下电柜箱门把手检测数据集VOC+YOLO格式1167张1类别
  • OverTheWire Bandit 靶场通关解析(上)
  • 【Python实战因果推断】4_因果效应异质性4
  • 大模型推理知识总结
  • [笔记] keytool 导入服务器证书和证书私钥
  • 【2024-热-办公软件】ONLYOFFICE8.1版本桌面编辑器测评
  • C# 23设计模式备忘
  • STL中的迭代器模式:将算法与数据结构分离
  • TCP、UDP详解
  • 【脚本工具库】批量下采样图像(附源码)
  • Web渗透:文件包含漏洞
  • 什么是yum源?如何对其进行配置?
  • Node.js全栈指南:认识MIME和HTTP
  • 基于weixin小程序智慧物业系统的设计
  • 成功解决​​​​​​​TypeError: __call__() got an unexpected keyword argument ‘first_int‘
  • vue3用自定义指令实现按钮权限