Question

我很难为调整大小列做逻辑。

此表是自定义的，带有div和spans元素。

这意味着构建此表仅使用纯html和scss（而不使用某些外部库）。

现在，我应该将列设置为垂直可调整大小。

我需要帮助来了解这种调整大小的逻辑。

对于我来说不清楚的部分是对此的主要逻辑，这意味着：

单击并拖动列右边框
然后应该应用某些CSS样式并更新列的宽度？
那部分对我来说是黑暗的。
哪个事件需要此，mousemove？
{{column.columnName}}

还在项目中，我找到了一些用于调整大小的自定义指令，也许这很有用：？

@Directive({
    selector: '[nanoResizable]'
})
export class ResizableDirective implements OnInit, OnDestroy {

    @Input() elementStyle: ModalStyle;

    private mouseDown: Subject<any> = new Subject();
    private mouseDrag: any;
    private mouseMove: Subject<any> = new Subject();
    private mouseUp: Subject<any> = new Subject();

    constructor() {
        this.mouseDrag = this.mouseDown
            .flatMap(
                startPos => this.mouseMove
                    .map((pos) => ({
                        width: pos.clientX - this.elementStyle.left,
                        height: pos.clientY - this.elementStyle.top
                    }))
                    .takeUntil(this.mouseUp)
            );

    }

    @HostListener('document:mouseup', ['$event'])
    onMouseup(event) {
        this.mouseUp.next(event);
    }

    @HostListener('mousedown', ['$event'])
    onMousedown(event) {
        this.mouseDown.next(event);
        return false; // Call preventDefault() on the event
    }

    @HostListener('document:mousemove', ['$event'])
    onMousemove(event) {
        this.mouseMove.next(event);
    }

    public ngOnInit() {
        this.mouseDrag
            .subscribe({
                next: pos => {
                    this.elementStyle.height = pos.height;
                    this.elementStyle.width = pos.width;
                }
            });
    }

    public ngOnDestroy() {
        this.mouseDrag.unsubscribe();
    }
}

ResizableDirective的CSS代码：

.nano-resize {
    position: absolute;
    display: flex;
    right: 0;
    bottom: 0;
    width: 7px;
    height: 10px;
    cursor: nwse-resize;
    z-index: 1;
   i {
     transform: rotate(-45deg);
     margin: auto;
   }
}

这是表格的样式：

    *@import "../base/colors";

.nano-table-grid {
  //flex: 1;
  .nano-table-grid-header {
    > div {
      border-bottom: 1px solid $nano-dark-grey;
      //padding: 0 5px;
      cursor: pointer;
      font-family: inherit !important;
      i {
        margin: auto 0 auto 2px;
      }
      &.sort-active {
        background-color: rgba(141, 192, 219, .25);
      }
    }
  }
  .nano-table-row-wrapper {
    border-bottom: 1px solid #e0e0e0;
  }
  .nano-table-row {
    display: flex;
    padding: 5px 0;
    flex-wrap: wrap;
    border: 1px solid transparent;
    > div {
      flex: 1;
      display: flex; 
      overflow: hidden;
      margin: 0 2px;
      > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .nano-table-placement-name-cell {
      flex: 2;
      flex-direction: column;
      span {
        margin: auto auto auto 0;
        max-width: 100%;
        &:nth-child(2) {
          //font-weight: bold;
        }
      }
      .tooltip-inner {
        max-width: inherit;
      }
    }

    .nano-table-entity-name-cell {
      flex: 3;
      flex-direction: column;

      span {
        margin: auto auto auto 0;
        max-width: 100%;
        &:nth-child(2) {
          //font-weight: bold;
        }
      }
      .tooltip-inner {
        max-width: inherit;
      }
    }
    .nano-table-name-cell {
      font-family: monospace;
      flex: 3;
      span {
        margin: auto 0;
      }
    }
    .nano-table-text-cell {
      font-family: monospace;
      flex: 2;
      span {
        margin: auto 0;
      }
    }
    .nano-table-placement-name-cell {
      min-width: 270px;
      span {
        margin: auto 0;
      }
    }
    .nano-table-number-cell {
      font-family: monospace;
      span {
        margin: auto 5px auto auto;
      }
    }
    .nano-table-actions-cell {
      min-width: 90px;
      flex: 2;
      justify-content: center;
      > span {
        padding: 5px;
      }
    }
    .nano-table-shrink-cell {
      flex: 0 0 50px;
      justify-content: center;
      align-items: center;
    }
    .nano-table-expanded-cell {
      flex: 3;
    }
    .nano-table-preview-cell {
      height: 500px;
      flex: 0 0 100%;
      margin-top: 7px;
      margin-bottom: -5px;
      flex-direction: column-reverse;
      position: relative;
      .nano-entity-comment {
        height: calc(100% - 50px);
      }
      .nano-entity-header {
        display: none;
      }
    }
    &.opened {
      border: 1px solid $nano-white-smoke-darken;
    }
    &:nth-child(even) {
      background-color: #fdfdfd;
    }
  }
}

.nano-table-footer {
  flex: 0 0 50px;
  display: flex;
  .pagination-wrapper {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    margin-left: 10px;
  }
  .page-count-wrapper {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    margin-right: 10px;
  }
  .pagination-item, .page-count-item {
    flex: 0 0 30px;
    padding: 5px;
    display: flex;
    background-color: #f6f6f6;
    margin: 10px 2px;
    border: none;
    span {
      margin: auto;
    }
    &.pagination-item-active, &:hover, &:disabled {
      background-color: #e0e0e0;
    }
    &:disabled {
      cursor: not-allowed;
    }
  }
}*

需要任何类型的帮助，这意味着建议，意见，与我共享一些库，我可以在angular 4和此表中使用该库来调整大小。

谢谢。

如何区分角度4中的鼠标“单击”和“拖动” div表列？

0 个答案: