JavaScript:ResizeObserver
요소의 크기 변화를 관찰한다.
Examples
- JavaScript:Example:DetectOverflow - ResizeObserver와 Vue를 사용하여 텍스트가 Overflow 되는지 확인하는 예제 코드.
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);
사용할 때는: