Angular2 使用html实现右键菜单

Angular2 使用html实现右键菜单

介绍

目前做的项目是接的别的公司的二期，使用的是被的公司做一期时用的架子，还是Angular2。目前有单元格右键的需求，找了半天没实现最后用html的形式实现，记录一下。

实验

看网上说使用ng-zorro-antd来开发，但是看了ng-zorro-antd官网后知道，目前最新的版本是14，而最低的版本是0.5，但是0.5版本只支持Angular4，所以2肯定是不支持的，网上其他大神的Angular2使用ng-zorro-antd是怎么实现的？

不过抱着试试的态度也进行时实现，首选安装的是0.5的版本，但是安装完成后才发现，此版本没有鼠标右键的功能，看了官网才知道 到0.7版本才加入NzDropdownService，所以切换成0.7版本。

安装0.7版本运行后报 No provider for Overlay NzDropdownService 的错，但是明明已经将NzDropdownService 添加到provider 了。查询的结果是建议升级Angular到版本4或者版本5。

使用html方式

废话少说，直接上代码：
html中代码：

调用方法：
         <p-autoComplete
                  placeholder="颜色"
                  [style.width]="'100%'" 
                  (contextmenu)="contextMenu($event,'colorTypeName',post['colorTypeName'],rowIndex)"
                  appendTo="body">
                </p-autoComplete>
右键面板：
  <div id="menu" class="menu">
    <app-paper-form-row>
      <button class="btn btn-link button" (click)="openModal('up')">向上填充</button>
    </app-paper-form-row>
    <app-paper-form-row>
      <button class="btn btn-link button" (click)="openModal('down')">向下填充</button>
    </app-paper-form-row>
  </div>

ts文件的

  ngOnInit() {
  //禁用鼠标本身右键
    document.oncontextmenu = function () {
      return false;
    };
  }

  contextMenu(e: MouseEvent, name: String, value: any, index: number) {
    //传过来的值
    this.name = name;
    this.value = value;
    this.index = index;
    //获取右键面板
    const menu = document.getElementById('menu');
    //设置面板位置
    menu.style.left = e.clientX + 'px';
    menu.style.top = (e.clientY - 70) + 'px';
    //添加显示样式
    menu.classList.add('active');
    //关闭右键菜单
    window.addEventListener('click', function () {
      menu.classList.remove('active');
    });
  }

 openModal(item) {
    const num = this._data['materialList'].length;
    if (item === 'up') {
    //向上填充的操作
    } else {
    //向下填充的操作
    }

css代码：

.menu{
  position: absolute;
  top:0px;
  left: 0px;
  background: #fff;
  border: 1px solid #ccc;
  font-size: 18px;
  visibility: hidden;
  height: 50px;
  text-align: center;
  border-radius:5px;
}
.active{
  visibility: visible;
}
.button{
  margin: 10px;
  line-height: 25px;
  font-size:16px;
}

效果图：
样式写的不太好看不过将就能看。

这还遇到个问题就是 这种获取面板位置的情况不能出现滚动条，有滚动条就会显示的位置不对，所以再定位面板位置的时候需要将滚动条离上边距加上。

试验了很多获取滚动条距离都是0，有人说不同浏览器获取方式不同。

const st = document.documentElement.scrollTop || document.body.scrollTop

这种也获取不到。最后根据鼠标点击事件来获取位置，由于我的鼠标右键只限定表格的单元格，所以表格table离最外层的元素有4层，所以使用点击事件往上找4层然后获取scrollTop

    let scrollTopValue = 0;
    if (e.currentTarget['offsetParent'].offsetParent.offsetParent.offsetParent) {
      scrollTopValue = e.currentTarget['offsetParent'].offsetParent.offsetParent.offsetParent.scrollTop;
    }
    menu.style.top = (e.clientY - 70 + scrollTopValue) + 'px';

这样无论出现多少滚动，面板出现的位置是原来获取的加上滚动条离上边距的高度，就能实现如影随形。

== 完结撒花 ==