鼠标右击在对应位置展示自定义元素

实现鼠标右击目标，在右击处展示操作列，鼠标左击后操作列隐藏

 

• 鼠标右击事件 onContextMenu

<div οncοntextmenu="myFunction()" contextmenu="mymenu">
<p>在文本框内右击鼠标查看上下文菜单！</p>
<menu type="context" id="mymenu">
  <menuitem label="Refresh" οnclick="window.location.reload();" icon="ico_reload.png"></menuitem>
  <menu label="Share on...">
    <menuitem label="Twitter" icon="ico_twitter.png" οnclick="window.open('//twitter.com/intent/tweet?text=' + window.location.href);"></menuitem>
    <menuitem label="Facebook" icon="ico_facebook.png" οnclick="window.open('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem>
  </menu>
  <menuitem label="向该网页发送邮件" οnclick="window.location='mailto:?body='+window.location.href;"></menuitem>
</menu>
</div>

只有 Firefox 中支持 contextmenu 属性！在Firefox下，右击后，在原本的右击框中会增加两行操作

 

• 目前实现是阻止默认事件，展示自定义操作列

开发需知

 

• 需要 rc-tooltip 模块 链接

<Tooltip 
  trigger="click"
  placement="bottomLeft"
  prefixCls="tab-contextmenu" // 样式前缀名称
  defaultVisible
  overlay={this.contextMenu}>  // 右击时展示的面板
  <span></span>
</Tooltip>

<style>
  .tab-contextmenu {
    position: absolute;
    left: -9999px;
    top: -9999px;
    z-index: $zIndex-context-menu;
    display: block;
    background-color: #fff;
      &.tab-contextmenu-hidden {
        display: none;
      }
  }
</style>

 

• react-dom

// 渲染一个React元素成为DOM，放到所提供的container里。并且返回这个组件的一个引用
ReactDOM.render(element, container[, callback])
// 从DOM元素中移除已挂载的React组件，清除它的事件处理器和state
ReactDOM.unmountComponentAtNode(container)

开发实现

 

import Tooltip from 'rc-tooltip';

class ContextMenuDemo extends React.Component {
  contextMenu = <ul>
      <li>aaa</li>
      <li>aaa</li>
    </ul>;
  componentDidMount() {
    this.getContainer();
  }
  getContainer = () => {
    if (!this.container) {
      this.container = document.createElement('div');
      document.body.appendChild(this.container);
    }
    return this.container;
  }
  handleRightClick = event => {
    event.preventDefault();
    event.stopPropagation();
    
    if (this.toolTip) {
      ReactDOM.unmountComponentAtNode(this.cmContainer);
      this.toolTip = null;
    }
    
    this.toolTip = (
      <Tooltip trigger="click"
        placement="bottomLeft"
        prefixCls="tab-contextmenu"
        defaultVisible
        overlay={this.contextMenu}>
        <span></span>
      </Tooltip>
    );
    // 容器位置定位在鼠标右击处
    Object.assign(this.container.style, {
      position: 'absolute',
      left: `${event.pageX}px`,
      top: `${event.pageY}px`,
    });
    ReactDOM.render(this.toolTip, this.container);
  }
  render() {
    return (
      <span onContextMenu={this.handleRightClick}>
        {pane.title}
      </span>
    )
  }
}