v-resize-observer detects size changes of DOM elements

v-resize-observer detects size changes of DOM elements

Document Address Official Document

Install

npm install v-resize-observer

introduce

Global introduction

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

Only introduce directive mode directive

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

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

Only introduce component mode 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[/\\]/],
};

Use directive 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" />

Use componentcomponent

<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}`);
}