v-resize-observer
Resize observer for Vue.
Detect size changes of DOM elements. Support Vue's directive and component.
Feature
- 🕰 Based on
ResizeObservable API
implementation - 🎁 Support
vue2
andvue3
- 💊 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
<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'
// vue@3.x
const app = createApp(App)
app.use(Resizer, {
// Custom command names and component names
directive: 'resize',
component: 'ResizeComponent'
})
// vue@2.x
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
todelay
;
🐞 Bug Fixes
- fix: Fixed failure to listen again after disabling listening.