vue3-v-resize
Resize observer for Vue.
Detect size changes of DOM elements. Support Vue's directive and component.
Feature
- 🕰 Based on
ResizeObservable API
implementation - 🎁 Support
vue3
- 💊 Support the use of directives or components
- 🧲 Optimize the frequency of triggering resize events
- 🛠 Support browsers: Edge/Chrome/Safari/Firefox
Install
npm
npm install vue3-v-resize
Usage
<template>
<div id="app">
<div v-resize:50.immediate="onResize">
Listened to elements
</div>
<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 'vue3-v-resize'
const disabled = ref(false)
function onResize({ width, height }, target) {
console.log(target, width, height)
}
</script>
1. Global Configuration
import Resizer from 'vue3-v-resize'
const app = createApp(App)
app.use(Resizer, {
directive: 'resize',
component: 'ResizeComponent'
})
2. On demand
<script setup>
import { ref } from 'vue'
import {
ResizeComponent,
resizeDirective as vResizeObserver
} from 'vue3-v-resize'
function onResize({ width, height }, target) {
console.log(target, width, height)
}
</script>
<template>
<div id="app">
<div v-resize-observer:100="onResize">
Listened to elements
</div>
<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" />
<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.