Resize observer for Vue. Detect size changes of DOM elements. 📡 检测DOM元素的尺寸变化, 支持Vue的指令和组件方式。
Resize observer for Vue. Detect size changes of DOM elements. Support Vue's directive and component.
ResizeObservable API
implementationvue2
and vue3
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>
<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>
// 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)
<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
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 elementsdirective
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
Component
<ResizeComponent target="#app" :delay="0" disabled="false" @resize="onResize">
<div>Listened to elements</div>
</ResizeComponent>
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
.resize
: Triggered when listening for element size changes.limiter
trigger limit option;wait
to delay
;