元素大小侦听器(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)时间