元素大小侦听器(Element Resize Observable)

QResizeObservable是Quasar组件，只要可包裹的DOM元素/组件（定义为QResizeObservable的直接父级）更改其大小，就会发出resize事件。 请注意这不涉及轮询，但过度使用也是代价高昂的。

安装

编辑 /quasar.conf.js:

framework: {
  components: [
    'QResizeObservable'
  ]
}

基本用法

<template>
  <!--
    我们会听取下面<div>的尺寸变化，所以我们把侦听器作为直接的子元素：
  -->
  <div>
    <q-resize-observable @resize="onResize" />
  </div>
</template>

<script>
export default {
  ...,
  methods: {
    ...,
    onResize (size) {
      console.log(size)
      // {
      //   width: 20 // 容器宽度（像素）
      //   height: 50 // 容器高度（像素）
      // }
    }
  }
}
</script>

请注意，QResizeObservable将在它被渲染并附加到DOM后立即触发事件，因此您可以拥有该容器的初始大小。

Vue属性

Property Type Description
debounce 数字 (Quasar v0.15.7+, 默认: 100) 以毫秒为单位的去抖(Debounce)时间
浮动操作按钮 窗口大小侦听器