vue3 自定义指令 自动获取节点的width 和 height
想写一个依赖库, 但是需要监听组件的width和height这些数据, 就找到了ResizeObserver这个方法,不想每次使用的时间都要创建和烧毁 ResizeObserver, 索性就直接封装成为一个指令用来获取想要的信息,ResizeObserver对象上可以或许获取的信息还好坏常多的, 除了width, height 还有 top, bottom, left, top等, 需要使用到这些可以到MDN去检察他的使用方法
实现结果
当元素大小发生改变时,会自动更新width 和height 的值
https://i-blog.csdnimg.cn/direct/d2406189dec54d3d8983658b13ad4f86.gif
一. 情况
"vue": "^3.4.29"
二. 代码
文件ResizeObserverStore.ts
class ResizeObserverStore {
// 存储目标元素和对应的ResizeObserver实例
observer= new Map<HTMLElement, ResizeObserver[]>();
// 获取目标元素对应的ResizeObserver实例
get(target: HTMLElement) {
return this.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, );
}
};
// 销毁目标元素对应的ResizeObserver实例
remove(target: HTMLElement) {
const observers = this.observer.get(target);
// 销毁事件
if (observers) {
observers.forEach(observer => {
observer.disconnect();
});
this.observer.delete(target);
}
}
}
// 创建一个ResizeObserverStore实例
const resizeObserverStore = new ResizeObserverStore();
//使用ResizeObserver监听目标元素的变化
export const useResizeObserver = (target: HTMLElement, callback: ResizeObserverCallback) => {
const observer = new ResizeObserver(callback);
observer.observe(target);
resizeObserverStore.set(target, observer);
return observer;
}
// 移除ResizeObserver监听
export const removeResizeObserver = (target: HTMLElement) => {
resizeObserverStore.remove(target);
}
文件: directives.ts
import {App, Directive} from "vue";
import {removeResizeObserver, useResizeObserver} from "ResizeObserverStore.ts";
export constvSize: Directive = {
mounted: (el, binding) => {
// 注册并使用resizeObserver
useResizeObserver(el, (entries) => {
binding.value.width = entries.contentRect.width
binding.value.height = entries.contentRect.height
})
},
beforeUnmount: (el) => {
// 销毁resizeObserver
removeResizeObserver(el)
},
}
export default (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>
<div class="layout-box" v-size="size"></div>
</template>
<script setup lang="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>
<style lang="scss" scoped>
.layout-box{
width: 100px;
height: 100px;
background-color: #f5f5f5;
border: 1pxsolid #bd34fe;
overflow: auto;
resize: both;
}
</style>
写的比较大抵, 如果在使用过程中发现什么问题, 欢迎评论和私信,
如果发现问题, 欢迎一起解决
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]