Element Resize Observable     

QResizeObservable is a Quasar component that emits a resize event whenever the wrapping DOM element / component (defined as direct parent of QResizeObservable) changes its size. Note that no polling is involved, but overusing it is costly too.

Installation

Edit /quasar.conf.js:

framework: {
  components: [
    'QResizeObservable'
  ]
}

Basic Usage

<template>
  <!--
    we listen for size changes on this next
    <div>, so we place the observer as direct child:
  -->
  <div>
    <q-resize-observable @resize="onResize" />
  </div>
</template>

<script>
export default {
  ...,
  methods: {
    ...,
    onResize (size) {
      console.log(size)
      // {
      //   width: 20 // width of container (in px)
      //   height: 50 // height of container (in px)
      // }
    }
  }
}
</script>

Please note that QResizeObservable will issue an event as soon as it gets rendered and attached to DOM, so you can have the initial size of the container.

Vue Properties

Property Type Description
debounce Number (Quasar v0.15.7+, default: 100) Debounce time in milliseconds
Floating Action Button Window Resize Observable
Last updated: Sat May 19 2018
Caught a mistake or want to contribute to the documentation? Suggest an edit on GitHub