sizeDirective.ts 642 B

1234567891011121314151617181920212223
  1. import {App} from "vue/dist/vue";
  2. const map = new WeakMap()
  3. const ob = new ResizeObserver((entries) => {
  4. for(const entry of entries){
  5. const handler = map.get(entry.target);
  6. handler && handler({
  7. width: entry.borderBoxSize[0].inlineSize,
  8. height: entry.borderBoxSize[0].blockSize
  9. });
  10. }
  11. });
  12. export function resizeObDirective(app: App){
  13. app.directive('resizeOb', {
  14. mounted(el,binding) {
  15. map.set(el,binding.value);
  16. ob.observe(el); // 监听目标元素
  17. },
  18. unmounted(el) {
  19. ob.unobserve(el); // 停止监听
  20. },
  21. })
  22. }