ToB企服应用市场:ToB评测及商务社交产业平台

标题: vue3 自定义指令 自动获取节点的width 和 height [打印本页]
作者: 农民    时间: 2024-10-17 10:46
标题: 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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4