监听标签元素尺寸变化

vite-plugin: 自定义 hooks + directive

安装

npm i xw-resize-vite-plugin

directive 用法

main.js 中

import useResize from "xw-resize-vite-plugin";
app.use(useResize);

<template>
  <div v-resize="callback" class="xw-resize">监听元素</div>
</template>
<script setup>
const callback = (e) => {
  console.log(e);
};
</script>
<style>
.xw-resize {
  width: 200px;
  height: 200px;
  background-color: skyblue;
  resize: both;
  overflow: hidden;
  cursor: move;
}
</style>

hooks 用法

<template>
  <div id="resizeObj">监听元素</div>
</template>
<script setup>
import { onMounted } from "vue";
import useResize from "xw-resize-vite-plugin";
onMounted(() => {
  const obj = document.querySelector("#resizeObj");
  useResize(obj, (e) => {
    console.log(e);
  });
});
</script>
<style>
.xw-resize {
  width: 200px;
  height: 200px;
  background-color: skyblue;
  resize: both;
  overflow: hidden;
  cursor: move;
}
</style>

实现过程

• 先实现 hooks useResize(el, callback) => {}函数
• 函数内部利用 ResizeObserver()去监听元素的尺寸变化，触发回调
• 再给 useResize 添加 install 属性，传入 vue 的 app 实例
• 最后利用 Vue3 自定义指令 app.directive('resize',(el, binding) => {}) 去做
• export default useResize
• 另外 ts 的话，还要写 useResize 的类型声明

import { App } from "vue";
declare const useResize: {
  (el: HTMLElement, callback: Function): void;
  install: (app: App) => void;
};
export default useResize;