v-resize-observer

[ English | 中文 ]

Resize observer for Vue.
Detect size changes of DOM elements. Support Vue's directive and component.

• Vue2 Live
• Vue3 Live

Feature

• 🕰 Based on ResizeObservable API implementation
• 🎁 Support vue2 and vue3
• 💊 Support the use of directives or components
• 🧲 Optimize the frequency of triggering resize events
• 🛠 Support browsers: IE9+/Edge/Chrome/Safari/Firefox

Install

npm

npm install v-resize-observer

browser

<script src="https://cdn.jsdelivr.net/npm/vue-demi/lib/index.iife.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-resize-observer/dist/index.iife.js"></script>

Usage

• Vue2.x Example
• Vue3.x Example

<template>
  <div id="app">
    <!-- directives -->
    <div v-resize:50.immediate="onResize">
      Listened to elements
    </div>
    
    <!-- Components -->
    <ResizeComponent @resize="onResize" :delay="100" :disabled="disabled">
      <div>Listened to elements</div>
    </ResizeComponent>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ResizeComponent, resizeDirective as vResize } from 'v-resize-observer'

const disabled = ref(false)

function onResize({ width, height }, target) {
  console.log(target, width, height)
}
</script>

1. Global Configuration

// main.js
import Resizer from 'v-resize-observer'

// [email protected]
const app = createApp(App)
app.use(Resizer, {
  // Custom command names and component names
  directive: 'resize',
  component: 'ResizeComponent'
})

// [email protected]
Vue.use(Resizer)

2. On demand

<script setup>
import { ref } from 'vue'
import {
  ResizeComponent,
  resizeDirective as vResizeObserver //You can change the directive name, the default: `v-resize, 
} from 'v-resize-observer'

// OR
// import Resizer from 'v-resize-observer'
// const ResizeComponent = Resizer.component
// const vResize = Resizer.directive

function onResize({ width, height }, target) {
  console.log(target, width, height)
}
</script>

<template>
  <div id="app">
    <!-- directives -->
    <div v-resize-observer:100="onResize">
      Listened to elements
    </div>
    
    <!-- Components -->
    <ResizeComponent @resize="onResize">
      <div>Listened to elements</div>
    </ResizeComponent>
  </div>
</template>

立即执行一次callback

API

Parameter	Type	Default	Description
target	string, HTMLElement	-	Target elements to listen to
delay	number	150	Delayed execution time
immediate	boolean	false	executed immediately
disabled	boolean	false	disable listening
resize	function	-	Callback function to listen for changes in element size

resize(data, target)

• data : elements size { width, height }
• target : Listening elements

use directive

The directive default name is v-resize, if you want to change it, you can specify it when you import it.

<div v-resize="onResize" />

<div v-resize:100="onResize" />
<div v-resize:100.immediate="onResize" />
<!-- No limit on trigger frequency -->
<div v-resize:0="onResize" />

Parameter：

• arg: => delay
• value: => resize
• modifiers.immediate

use Component

<ResizeComponent target="#app" :delay="0" disabled="false" @resize="onResize">
  <div>Listened to elements</div>
</ResizeComponent>

props

• target: The target element to listen to, the default current element.
• delay: Delay execution time, default: 150.
• immediate: Execute immediately, default: false.
• disabled: disable listening, default: false.

events

• resize: Triggered when listening for element size changes.

ChangeLog

v2.0.0

🚀 Features

• feat: compatible with vue2.x and 3.x;
• feat: add Typescript type hints;
• feat: support for global registration of custom directive names and component names;
• feat: add re-listening function;
• perf: remove the limiter trigger limit option;
• perf: change the delay time wait to delay;

🐞 Bug Fixes

• fix: Fixed failure to listen again after disabling listening.

v1.x

• v1.x Documents