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基础知识(10):函数(Ⅱ) 一.全局变量和局部变量 局部变量:在函数内定义的变量,在函数内使用 全局变量:在函数外定义的变量,在程序任何地方都可以使用 1.全局变量与局部变量同名 这时函 ...
- 编译安装centos6.9 php7.0 mysql5.6 nginx1.8
2018年3月15日 11:41:40 注意文章时效! 此文章不是给新用户参考的,没有每一步的操作,请注意! yum -y groupinstall "Development Tools&q ...
- 如何解决PuTTY中文乱码的问题
我们可以使用PuTTY这个工具在一台机器上对其它linux系统进行连接和操作.如果大家都在linux系统中,可以在终端中用ssh ip或主机名直接连接. 如果要在windows中对远程的linux系统 ...
- 初试kotlin:用Kotlin开发桌面/CommandLine 工具
既然kotlin是google和jetbrain联合搞的,开发环境不用说了肯定是Intellij Idea了. 先创建一个kotlin项目. 先来一个HelloWorld package com.xi ...
- vue 之组件递归;
在开发一个 PC 端的项目时,需要开发一个树状结构,直接上效果图如下:点击 "+" 号的时候则展开下一级,点击 "-" 号的时候则收起: 之所以写这篇博客,因为 ...
- SpringBoot2.0整合mybatis、shiro、redis实现基于数据库权限管理系统
转自https://blog.csdn.net/poorcoder_/article/details/71374002 本文主要介绍使用SpringBoot与shiro实现基于数据库的细粒度动态权限管 ...
- Oracle 数据库逻辑结构2.md
Oracle 数据库逻辑结构一.存储关系Oracle 数据库逻辑上是由一个或多个表空间组成的,表空间物理上是由一个或多个数据文件组成的:而在逻辑上表空间又是由一个或多个段组成的.在Oracle 数据库 ...
- python数据结构-如何快速找到多个字典中的公共键
如何快速找到多个字典中的公共键 问题举例 统计每轮都进球的球员: 第1轮{‘tom’:1, 'meixi':2} 第2轮{‘coco’:3, 'meixi':4, 'marton':2} 第3轮{'c ...
- Ubuntu16.04彻底卸载MySQL
删除mysql的数据文件 sudo rm /var/lib/mysql/ -R 删除mysql的配置文件 sudo rm /etc/mysql/ -R 自动卸载mysql(包括server和clien ...
- Go 初体验 - 令人惊叹的语法 - defer.2 - 如何提前执行?
上一文中讲到 defer 会在宿主函数 return 之前调用,那么我们就是想在宿主函数执行到中间调用,怎么办呢? 1. 改变宿主函数逻辑,分成多个函数,需要的那个函数里 defer . 2. 使用匿 ...