vue3 自定义指令 自动获取节点的width 和 height

想写一个依赖库, 但是需要监听组件的width和height这些数据, 就找到了ResizeObserver这个方法,不想每次使用的时间都要创建和烧毁 ResizeObserver, 索性就直接封装成为一个指令用来获取想要的信息,
ResizeObserver对象上可以或许获取的信息还好坏常多的, 除了width, height 还有 top, bottom, left, top等, 需要使用到这些可以到MDN去检察他的使用方法
实现结果
当元素大小发生改变时,会自动更新width 和height 的值

一. 情况

1. "vue": "^3.4.29"

复制代码

二. 代码

文件ResizeObserverStore.ts

1. class ResizeObserverStore {
2.     // 存储目标元素和对应的ResizeObserver实例
3.     observer= new Map<HTMLElement, ResizeObserver[]>();
4.     // 获取目标元素对应的ResizeObserver实例
5.     get(target: HTMLElement) {
6.         return this.observer.get(target) || [];
7.     }
8.     // 设置目标元素对应的ResizeObserver实例
9.     set(target: HTMLElement, observer: ResizeObserver) {
10.         const observers = this.observer.get(target);
11.         if (observers) {
12.             observers.push(observer);
13.         } else {
14.             this.observer.set(target, [observer]);
15.         }
16.     };
17.     // 销毁目标元素对应的ResizeObserver实例
18.     remove(target: HTMLElement) {
19.         const observers = this.observer.get(target);
20.         // 销毁事件
21.         if (observers) {
22.             observers.forEach(observer => {
23.                 observer.disconnect();
24.             });
25.             this.observer.delete(target);
26.         }
27.     }
28. }
29. // 创建一个ResizeObserverStore实例
30. const resizeObserverStore = new ResizeObserverStore();
32. //  使用ResizeObserver监听目标元素的变化
33. export const useResizeObserver = (target: HTMLElement, callback: ResizeObserverCallback) => {
34.     const observer = new ResizeObserver(callback);
35.     observer.observe(target);
36.     resizeObserverStore.set(target, observer);
37.     return observer;
38. }
40. // 移除ResizeObserver监听
41. export const removeResizeObserver = (target: HTMLElement) => {
42.     resizeObserverStore.remove(target);
43. }

复制代码

文件: directives.ts

1. import {App, Directive} from "vue";
2. import {removeResizeObserver, useResizeObserver} from "ResizeObserverStore.ts";
5. export const  vSize: Directive = {
6.     mounted: (el, binding) => {
7.         // 注册并使用resizeObserver
8.         useResizeObserver(el, (entries) => {
9.             binding.value.width = entries[0].contentRect.width
10.             binding.value.height = entries[0].contentRect.height
11.         })
12.     },
13.     beforeUnmount: (el) => {
14.         // 销毁resizeObserver
15.         removeResizeObserver(el)
16.     },
17. }
19. export default (app: App)=>{
20.     app.directive('size', vSize)
21. }

复制代码

  该指令主要使用ResizeObserver对象,它可以用于监听元素边界尺寸的大小。
  三. 使用 (全局 或 局部 使用都可以)

1. 全局注册

文件: main.ts

1. import {createApp} from "vue";
2. import App from "./App.vue";
3. import directives from "../directives";
5. const app = createApp(App)
6. // 在这里注册以下就可以使用了
7. directives(app)
8. app.mount("#app");

复制代码

2. 局部使用

1. <template>
2.   <div class="layout-box" v-size="size"></div>
3. </template>
5. <script setup lang="ts">
6.   import {reactive, ref, watch, watchEffect} from "vue";
7.   // 如果全局引入的话就不用在这里引用了
8.   import {vSize} from "../directives";
9.   const size = reactive({
10.     width: 0,
11.     height: 0
12.   })
13.   watchEffect(
14.       () => {
15.         console.log(size.width, size.height)
16.       }
17.   )
18. </script>
20. <style lang="scss" scoped>
21. .layout-box{
22.   width: 100px;
23.   height: 100px;
24.   background-color: #f5f5f5;
25.   border: 1px  solid #bd34fe;
26.   overflow: auto;
27.   resize: both;
28. }
29. </style>

复制代码

  写的比较大抵, 如果在使用过程中发现什么问题, 欢迎评论和私信,
如果发现问题, 欢迎一起解决

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。