React项目中实现右键自定义菜单
最近在react项目中需要实现一个,右键自定义菜单功能。找了找发现纯react项目里没有什么工具可以实现这样的功能,所以在网上搜了搜相关资料。下面我会附上完整的组件代码。
(注:以下代码非本人原创,具体详情请参考 https://blog.csdn.net/anyicheng2015/article/details/78581064)
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import assign from 'object-assign' import './index.less'
import _ from 'lodash' class RightClickContextMenu extends Component {
static propTypes = {
style: PropTypes.object,
onClickVideoAudioSpeedBtn: PropTypes.func,
} static defaultProps = {
style: {},
onClickVideoAudioSpeedBtn: _.noop,
} state = {
visible: false,
} componentDidMount() {
// 添加右键点击、点击事件监听
document.addEventListener('contextmenu', this.handleContextMenu)
document.addEventListener('click', this.handleClick)
} componentWillUnmount() {
// 移除事件监听
document.removeEventListener('contextmenu', this.handleContextMenu)
document.removeEventListener('click', this.handleClick)
} // 右键菜单事件
handleContextMenu = (event) => {
event.preventDefault() this.setState({ visible: true }) // clientX/Y 获取到的是触发点相对于浏览器可视区域左上角距离
const clickX = event.clientX
const clickY = event.clientY
// window.innerWidth/innerHeight 获取的是当前浏览器窗口的视口宽度/高度
const screenW = window.innerWidth
const screenH = window.innerHeight
// 获取自定义菜单的宽度/高度
const rootW = this.root.offsetWidth
const rootH = this.root.offsetHeight // right为true,说明鼠标点击的位置到浏览器的右边界的宽度可以放下菜单。否则,菜单放到左边。
// bottom为true,说明鼠标点击位置到浏览器的下边界的高度可以放下菜单。否则,菜单放到上边。
const right = (screenW - clickX) > rootW
const left = !right
const bottom = (screenH - clickY) > rootH
const top = !bottom if (right) {
this.root.style.left = `${clickX}px`
} if (left) {
this.root.style.left = `${clickX - rootW}px`
} if (bottom) {
this.root.style.top = `${clickY}px`
}
if (top) {
this.root.style.top = `${clickY - rootH}px`
}
}; // 鼠标单击事件,当鼠标在任何地方单击时,设置菜单不显示
handleClick = () => {
const { visible } = this.state
if (visible) {
this.setState({ visible: false })
}
}; render() {
const wrapStyles = assign({}, this.props.style)
const { visible } = this.state return (
visible && (
<div ref={(ref) => { this.root = ref }} className="contextMenu-wrap" style={wrapStyles}>
<div className="contextMenu-option">输入文字</div>
<div className="contextMenu-option">网络连接监控</div>
<div className="contextMenu-option" role="button" onClick={this.props.onClickVideoAudioSpeedBtn}>音视频流监控</div>
<div className="contextMenu-option">教室权限控制</div>
<div className="contextMenu-separator" />
<div className="contextMenu-option">设置...</div>
<div className="contextMenu-option">全局设置...</div>
</div>
)
)
}
} export default RightClickContextMenu
样式部分如下:
.contextMenu-wrap{
z-index:;
position: fixed;
background: linear-gradient(to right, #c6c7cf, #f0f0f0);
box-shadow: 0px 2px 5px #999999;
border-radius: 4px;
padding-top: 5px;
.contextMenu-option{
padding: 0px 50px 2px 15px;
min-width: 160px;
cursor: default;
font-size: 14px;
&:hover {
background: #388bfe;
color: white;
}
&:active {
color: #b5b7be;
background: linear-gradient(to top, #555, #444);
}
}
.contextMenu-separator{
width: 100%;
height: 1px;
background: #b5b7be;
margin: 2px 0;
}
}
React项目中实现右键自定义菜单的更多相关文章
- html中实现某区域内右键自定义菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 如何在非 React 项目中使用 Redux
本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...
- 如何优雅地在React项目中使用Redux
前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...
- react项目中实现元素的拖动和缩放实例
在react项目中实现此功能可借助 react-rnd 库,文档地址:https://github.com/bokuweb/react-rnd#Screenshot .下面是实例运用: import ...
- React项目中使用Mobx状态管理(二)
并上一节使用的是普通的数据状态管理,不过官方推荐使用装饰器模式,而在默认的react项目中是不支持装饰器的,需要手动启用. 官方参考 一.添加配置 官方提供了四种方法, 方法一.使用TypeScrip ...
- 在react项目中使用ECharts
这里我们要在自己搭建的react项目中使用ECharts,我们可以在ECharts官网上看到有一种方式是在 webpack 中使用 ECharts,我们需要的就是这种方法. 我们在使用ECharts之 ...
- 优雅的在React项目中使用Redux
概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...
- 深入浅出TypeScript(5)- 在React项目中使用TypeScript
前言 在第二小节中,我们讨论了利用TypeScript创建Web项目的实现,在本下节,我们讨论一下如何结合React创建一个具备TypeScript类型的应用项目. 准备 Webpack配置在第二小节 ...
- redux在react项目中的应用
今天想跟大家分享一下redux在react项目中的简单使用 1 1.redux使用相关的安装 yarn add redux yarn add react-redux(连接react和redux) 2. ...
随机推荐
- Python学习之旅(十三)
Python基础知识(12):函数(Ⅲ) 高阶函数 1.map map()函数接收两个参数,一个是函数,一个是Iterable,map将传入的函数依次作用到序列的每个元素,并把结果作为新的Iterat ...
- ELK之安装searchguard后默认管理员用户admin修改
安装完elasticsearch之后会有一个默认的用户admin密码也为admin,该用户无法删除无法编辑修改密码,用于生产时安全性较差,需要修改默认密码或者删除该admin用户 使用工具生产加密密码 ...
- 使用 EF Core 的 EnableRetryOnFailure 解决短暂的数据库连接失败问题
阿里云服务器有时会出现短暂的连接不上数据库服务器(RDS)的问题,之前由于没有启用 Entity Framework Core 的失败重试功能(默认是禁用的),短暂的连接失败立马会引发下面的异常从而出 ...
- Web开发——HTML基础(HTML表单/下拉列表/多行输入)
参考: 参考:http://www.w3school.com.cn/html/html_forms.asp 目录: 1.<form> 元素 1.1 <input> 元素(输入属 ...
- Xcode工程编译错误之iOS开发之Xcode9报错 Compiling IB documents for earlier than iOS7 is no longer supported.
概要: 在我们升级到Xcode9时,最低的编译版本为iOS8,但是在使用一些SDK的时候就会报出Compiling IB documents for earlier than iOS7 is no l ...
- jsp (二) 练习
package cn.sasa.serv; import java.io.IOException; import java.sql.SQLException; import java.util.Lis ...
- 构造方法 this super
1 构造方法 1.1 构造方法Constructor概述创建对象要明确属性值,此时需要用到构造方法,即对象创建时要执行的方法,用来给对象的属性进行初始化.在new对象时,知道其执行的构造方法是什么,就 ...
- release 步骤
一:在新的 TR 里面创建自己的task 1: /n se01 进入自己的用户名下面 2:display 3:选中自己的名字右键>check object 4:选中自己的名字右键> dir ...
- safari手机浏览器的width:100%的自适应问题
Tips: 调试 iPad 或 iPhone 可在设置中启动调试模式,在 Mac 中的 Safari 浏览器 同样开启开发者模式后,进行联机调试.功能彪悍. 最近在做一个页面时,发现在 iPad 的 ...
- ajax 显示,删除,批量删除,修改反填功能实现
1.页面代码 <body> <h1>显示所有员工信息</h1> <input id="Button1" type="button ...