Question

我正在使用https://mattlewis92.github.io/angular-resizable-element/demo/来使底部元素仅在顶部边框上可调整大小。我上面有一张桌子，我也做了调整大小，但只有底部边框。问题是当我增加以下元素的高度时，我希望表格的底部边框减小或从底部减小其高度。我很难解决这个问题。

这是我在stackoverflow上发表的第一篇文章，对不起，如果我做错了什么或错过了什么。

https://stackblitz.com/edit/angular-k2beg1

我尝试使用ElementRef，[style.height]和上面的插件提供的事件。

<div 
mwlResizable 
#tableHeight 
[style.height.px]="tableHeight" 
[ngStyle]="styleTable" 
[resizeEdges]="{bottom: true, right: false, top: false, left: false}"
style="height: 200px; width: 300px; background-color: red">

</div>


<div 
[resizeCursorPrecision]="5" 
mwlResizable 
[validateResize]="validate"
[ngStyle]="style" 
[enableGhostResize]="true" 
[resizeEdges]="{bottom: false, right: false, top: true, left: false}" (resizing)="resizing($event)" 
style="height: 200px; width: 300px; background-color: blue; margin-top: 30px;"
(resizeEnd)="onResizeEnd($event)">

</div>

style: object = {};
styleTable: object = {};
tableHeight: any;

validate(event: ResizeEvent): boolean {
   return true;
 }

onResizeEnd(event: ResizeEvent): void {
   this.style = {
     position: 'fixed',
     left: `${event.rectangle.left}px`,
     width: `${event.rectangle.width}px`,
     top: `${event.rectangle.top}px`,
     height: `${event.rectangle.height}px`
   };
 }

resizing(event) {
   this.styleTable = {
     left: `${event.rectangle.left}px`,
     width: `${event.rectangle.width}px`,
     top: `${event.rectangle.top}px`,
     height: `${event.rectangle.height--}px`
   }
 }

Answer 1

尝试使用此-

Hello.component.ts

/* tslint:disable:max-inline-declarations */
import { Component } from '@angular/core';
import { ResizeEvent } from 'angular-resizable-element';

@Component({
  selector: 'mwl-demo',
  styles: [
    `
      .rectangle {
        position: relative;
        top: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 300px;
        height: 150px;
        background-color: #fd4140;
        border: solid 1px #121621;
        color: #121621;
        margin: auto;
      }
      .resize-handle-top,
      .resize-handle-bottom {
        position: absolute;
        height: 5px;
        cursor: row-resize;
        width: 100%;
      }
      .resize-handle-top {
        top: 0;
      }
      .resize-handle-bottom {
        bottom: 0;
      }
      .resize-handle-left,
      .resize-handle-right {
        position: absolute;
        height: 100%;
        cursor: col-resize;
        width: 5px;
      }
      .resize-handle-left {
        left: 0;
      }
      .resize-handle-right {
        right: 0;
      }
    `
  ],
  template: `
    <div class="text-center">
      <div
        class="rectangle"
        [ngStyle]="style"
        mwlResizable
        [validateResize]="validate"
        [enableGhostResize]="true"
        [resizeSnapGrid]="{ left: 50, right: 50 }"
        (resizeEnd)="onResizeEnd($event)"
      >
        <div
          class="resize-handle-top"
          mwlResizeHandle
          [resizeEdges]="{ top: true }"
        ></div>
        <div
          class="resize-handle-left"
          mwlResizeHandle
          [resizeEdges]="{ left: true }"
        ></div>
        <div
          class="resize-handle-right"
          mwlResizeHandle
          [resizeEdges]="{ right: true }"
        ></div>
        <div
          class="resize-handle-bottom"
          mwlResizeHandle
          [resizeEdges]="{ bottom: true }"
        ></div>
      </div>
    </div>
  `
})
export class HelloComponent {
  public style: object = {};

  validate(event: ResizeEvent): boolean {
    const MIN_DIMENSIONS_PX: number = 50;
    if (
      event.rectangle.width &&
      event.rectangle.height &&
      (event.rectangle.width < MIN_DIMENSIONS_PX ||
        event.rectangle.height < MIN_DIMENSIONS_PX)
    ) {
      return false;
    }
    return true;
  }

  onResizeEnd(event: ResizeEvent): void {
    this.style = {
      position: 'fixed',
      left: `${event.rectangle.left}px`,
      top: `${event.rectangle.top}px`,
      width: `${event.rectangle.width}px`,
      height: `${event.rectangle.height}px`
    };
  }
}

增加一个div的高度以减少另一个div的高度？

1 个答案: