Skip to content
Search

JavaScript:ResizeObserver

lastmod 2022-04-04created 2021-11-018 edits

Observes changes in an element's size.

Examples

Polyfills

Vue directive

Code that applies @juggle/resize-observer as a Vue directive: 

import {VNodeDirective} from 'vue/types/vnode';
import {ResizeObserver} from '@juggle/resize-observer';

class ResizeObserverElement extends HTMLElement {
  resizeObserver?: ResizeObserver;
  callback?: (size: DOMRectReadOnly) => void;
}

function inserted(el: ResizeObserverElement, binding: VNodeDirective) {
  el.callback = binding.value;
  el.resizeObserver = new ResizeObserver((entries, observer) => {
    for (const entry of entries) {
      if (entry.target === el && el.callback) {
        el.callback(entry.contentRect);
      }
    }
  });
  el.resizeObserver.observe(el);
}

function unbind(el: ResizeObserverElement) {
  if (!el.resizeObserver) {
    return;
  }

  el.resizeObserver.disconnect();
  delete el.resizeObserver;
  delete el.callback;
}

export const ResizeObserverDirective = {
  inserted,
  unbind,
}

export default ResizeObserverDirective;

Then register the directive: 

import ResizeObserverDirective from '@/directives/ResizeObserver';
Vue.directive('resize-observer', ResizeObserverDirective);

To use it: 

<canvas v-resize-observer="onResizeObserver" ...></canvas>

See also

Favorite site

author Zer0 sitemap