23 lines
571 B
TypeScript
23 lines
571 B
TypeScript
import { throttle } from 'lodash'
|
|
import { Directive } from 'vue'
|
|
|
|
export const resizeDirective: Directive<HTMLElement, ResizeObserverCallback> = {
|
|
mounted: (el, binding) => {
|
|
const callback = binding.value ?? (() => {})
|
|
const observer = new ResizeObserver(callback)
|
|
observer.observe(el)
|
|
el['observer'] = observer
|
|
},
|
|
unmounted: (el) => {
|
|
const observer = el['observer']
|
|
observer.disconnect()
|
|
},
|
|
}
|
|
|
|
export const defineResizeCallback = (
|
|
callback: ResizeObserverCallback,
|
|
wait?: number,
|
|
) => {
|
|
return throttle(callback, wait ?? 100)
|
|
}
|