v-resize-observer 检测 DOM 元素的尺寸变化

v-resize-observer 检测 DOM 元素的尺寸变化

文档地址 官方文档

安装

npm install v-resize-observer

引入

全局引入

import ResizeObserver from "v-resize-observer";
vue.use(ResizeObserver);

仅引入指令方式 directive

import resizeDirective from "v-resize-observer/src/directive";

export default {
    
    
  directives: {
    
    
    resize: resizeDirective,
  },
};

仅引入组件方式 component

import ResizeComponent from "v-resize-observer/src/component";

export default {
    
    
  components: {
    
    
    ResizeObserver: ResizeComponent,
  },
};

注意:如果是按需引入指令或组件，则必须在 vue.config.js 中配置transpileDependencies属性.

module.exports = {
    
    
  transpileDependencies: [/[/\\]node_modules[/\\]v-resize-observer[/\\]/],
};

使用指令 directive

<div v-resize="hanldResize" />

<div v-resize:debounce="hanldResize" />
<div v-resize:debounce.200="hanldResize" />

<div v-resize:throttle="hanldResize" />
<div v-resize:throttle.200="hanldResize" />

使用组件 component

<ResizeObserver @resize="hanldResize">
  <div></div>
</ResizeObserver>

<ResizeObserver
  target="#app"
  limiter="debounce"
  :wait="150"
  @resize="hanldResize"
>
  <div></div>
</ResizeObserver>

function hanldResize({
     
      width, height }, target) {
    
    
  console.log(`width: ${
      
      width}, height: ${
      
      height}`);
}