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

想写一个依赖库, 但是需要监听组件的width和height这些数据, 就找到了

ResizeObserver

这个方法,不想每次使用的时候都要创建和销毁

ResizeObserver

, 索性就直接封装成为一个指令用来获取想要的信息,
ResizeObserver对象上能够获取的信息还是非常多的, 除了

width, height

还有

top, bottom, left, top

等, 需要使用到这些可以到MDN去查看他的使用方法

实现效果

当元素大小发生改变时,会自动更新width 和height 的值

一. 环境

"vue": "^3.4.29"

二. 代码

文件

ResizeObserverStore.ts

classResizeObserverStore{// 存储目标元素和对应的ResizeObserver实例
    observer=newMap<HTMLElement, ResizeObserver[]>();// 获取目标元素对应的ResizeObserver实例get(target: HTMLElement){returnthis.observer.get(target)||[];}// 设置目标元素对应的ResizeObserver实例set(target: HTMLElement, observer: ResizeObserver){const observers =this.observer.get(target);if(observers){
            observers.push(observer);}else{this.observer.set(target,[observer]);}};// 销毁目标元素对应的ResizeObserver实例remove(target: HTMLElement){const observers =this.observer.get(target);// 销毁事件if(observers){
            observers.forEach(observer =>{
                observer.disconnect();});this.observer.delete(target);}}}// 创建一个ResizeObserverStore实例const resizeObserverStore =newResizeObserverStore();//  使用ResizeObserver监听目标元素的变化exportconstuseResizeObserver=(target: HTMLElement, callback: ResizeObserverCallback)=>{const observer =newResizeObserver(callback);
    observer.observe(target);
    resizeObserverStore.set(target, observer);return observer;}// 移除ResizeObserver监听exportconstremoveResizeObserver=(target: HTMLElement)=>{
    resizeObserverStore.remove(target);}

文件:

directives.ts

import{App, Directive}from"vue";import{removeResizeObserver, useResizeObserver}from"ResizeObserverStore.ts";exportconst  vSize: Directive ={mounted:(el, binding)=>{// 注册并使用resizeObserveruseResizeObserver(el,(entries)=>{
            binding.value.width = entries[0].contentRect.width
            binding.value.height = entries[0].contentRect.height
        })},beforeUnmount:(el)=>{// 销毁resizeObserverremoveResizeObserver(el)},}exportdefault(app: App)=>{
    app.directive('size', vSize)}

该指令主要使用ResizeObserver对象,它可以用于监听元素边界尺寸的大小。

三. 使用 (全局 或 局部 使用都可以)

1. 全局注册

文件:

main.ts

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

2. 局部使用

<template><divclass="layout-box"v-size="size"></div></template><scriptsetuplang="ts">import{reactive, ref, watch, watchEffect}from"vue";// 如果全局引入的话就不用在这里引用了import{vSize}from"../directives";const size =reactive({width:0,height:0})watchEffect(()=>{
        console.log(size.width, size.height)})</script><stylelang="scss"scoped>.layout-box{width: 100px;height: 100px;background-color: #f5f5f5;border: 1px  solid #bd34fe;overflow: auto;resize: both;}</style>

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