简介

sizeOb 是一个 Vue 3 自定义指令，用于监听元素大小的变化并在大小变化时执行相应的操作。该指令基于 ResizeObserver API，可以帮助你实时监测元素的宽度和高度变化。

使用方法

安装

首先，确保你已经在项目中安装了 Vue 3。

导入和注册指令

  1. 在需要使用该指令的地方，导入 sizeOb 指令：

import { onUnmounted } from 'vue';

const sizeOb = {
  mounted(el, binding) {
    const handleSizeChange = binding.value;

    const resizeObserver = new ResizeObserver(entries => {
      for (let entry of entries) {
        const { width, height } = entry.contentRect;
        handleSizeChange({ width, height });
      }
    });

    resizeObserver.observe(el);

    onUnmounted(() => {
      resizeObserver.disconnect();
    });
  }
};

export default sizeOb;

  1. 在组件中使用 sizeOb 指令：

<template>
  <div v-size-ob="handleSizeChange" > </div>
</template>

<script setup lang="ts">
function handleSizeChange({width, height}){
    console.log('Element size changed:', width,height)
}
</script>

参数说明

  • handleSizeChange: 一个回调函数，用于处理元素大小变化时的逻辑。该函数接收一个包含 width 和 height 属性的对象作为参数，表示元素的宽度和高度。

效果

当指定的元素的大小发生变化时，handleSizeChange 函数将会被调用，并传入包含新的宽度和高度的对象。

结语

通过 sizeOb 自定义指令，你可以方便地监听元素大小的变化，并在变化时执行相应的操作。这对于需要根据元素大小动态调整布局或样式的场景非常有用。