Skip to content

JavaScript:ResizeObserver

요소의 크기 변화를 관찰한다.

Examples

Polyfills

Vue directive

@juggle/resize-observer을 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;

그리고 디렉티브 등록: 

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

사용할 때는: 

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

See also

Favorite site