Aurelia:调整大小/布局更改视图事件

Aurelia: resize/layout change event for view?

本文关键字：视图 事件 布局 调整 Aurelia      更新时间：2023-09-26

有没有办法订阅视图以观察Aurelia中的调整大小/布局事件？我有一张画布，我想调整大小。我想知道是否有一种"奥雷利亚"方法可以做到这一点？

我试过了： 

<div ref="canvasContainer" class="widget-dial-container" resize.delegate="doresize()">
  <canvas ref="canvas" class="widget-dial-canvas" />
</div>

但它从不调用我的doresize()方法。

我尝试绑定到 DOM offsetWidth 和 offsetHeight，但这也不起作用（在 vm 中@bindable canvasContainer;和没有）

正如 Kruga 所提到的，resize 事件仅在window本身上受支持。您可以使用Aurelia平台抽象层的PLATFORM对象以跨平台的方式附加到它。 你必须跑jspm install aurelia-pal才能得到它。如果您不担心交叉平台，那么您可以使用window对象。

以下模板和 VM 对我有用。我在调整大小计时器上实现了限制：

.HTML

<template>
  <div style="height: 125px; min-width: 150px; width: 100%;" ref="canvasContainer">
    <canvas ref="canvas" width.one-way="canvasContainer.offsetWidth"></canvas>
  </div>
</template>

模板

import {PLATFORM} from 'aurelia-pal';
export class App {
  resizeTimer = null;
  resizeEventHandler = () => this.resized();
  attached() {
    this.resized();
    PLATFORM.global.addEventListener("resize", this.resizeEventHandler);
  }
  detached() {
    PLATFORM.global.removeEventListener("resize", this.resizeEventHandler);
  }
  resized() {
    clearTimeout(this.resizeTimer);
    this.resizeTimer = setTimeout(() => {
      let ctx = this.canvas.getContext("2d");
      ctx.fillStyle = "green";
      ctx.font = "30px Arial";
      ctx.fillText(`Width: ${this.canvas.width}`,10,50);
    }, 150);
  }
}

我做了一个使用包npm:element-resize-detector的附加组件。这将检测对div 大小的所有更改，包括来自 css 动画的更改。

https://github.com/MeirionHughes/aurelia-resize

安装它： 

npm install aurelia-resize --save

将其添加到您的配置中： 

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .plugin('aurelia-resize');

在视图模型上添加一个方法：

foo(detail){
    console.log("width=" + detail.width);
    console.log("height=" + detail.height);
    console.log("old width=" + detail.widthOld);
    console.log("old height=" + detail.heightOld);
}

然后通过向 Resize 事件添加resizeable属性和绑定来使用它。 

<div resizeable resize.trigger="foo($event.detail)">
相关文章：