Vue directive to detect HTML resize events based on CSS Element Queries with debouncing and throttling capacity.
Use this option when you need to receive all the resize events.
The onResize function will be called each time the element resizes with the corresponding HTML element as only argument.
<div v-resize="onResize">Use throttle when you need to rate-limit resize events frequency.
- With default timeout (150 ms):
<div v-resize:throttle="onResize">- With custom timeout (in ms):
<div v-resize:throttle.100="onResize">Use debounce when you only need to be notified when resize events ends.
- With default timeout (150 ms):
<div v-resize:debounce="onResize">- With custom timeout (in ms):
<div v-resize:debounce.50="onResize">Use this option to receive the resize callback right after the element is mounted on the DOM and visible.
<div v-resize.initial="onResize">- Available through npm:
npm install vue-resize-directive --save- For Modules
// ES6
import resize from 'vue-resize-directive'
//...
export default {
directives: {
resize,
}
//...
// ES5
var resize = require('vue-resize-directive')-
Just include
Vueresize.jsafterResizeSensor.jsfrom css-element-queries andlodash.jsscript.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent