元素大小变化侦听器

QResizeObserver 是一个可以在目标元素/组件(QResizeObserver 的直接父元素)的大小改变时触发一个 resize 事件的 Quasar 组件。注意,虽然它的原理不是轮询,但是过度使用也会造成高性能开销。

QResizeObserver API

QResizeObserver API

debounce
: String | Number
说明
防抖延迟时间(以毫秒为单位)

用法



<template>
  <div class="q-pa-md q-gutter-md">
    <q-btn color="primary" push @click="setRandomSize" label="Set Random Size" />

    <div :style="style" class="container bg-amber rounded-borders glossy">
      <!--
        we listen for size changes on this next
        <div>, so we place the observer as direct child:
      -->
      <q-resize-observer @resize="onResize" />
    </div>

    <div v-if="report" class="q-gutter-sm">
      Reported:
      <q-badge>width: {{ report.width }}</q-badge>
      <q-badge>height: {{ report.height }}</q-badge>
    </div>
  </div>
</template>

Reported:
width: 200
height: 200

请注意,QResizeObserver 被附加到 DOM 后会立即触发一次事件,因此您可以获得容器的初始大小。