Resize observer for Vue. Detect size changes of DOM elements. Support Vue's directive and component.
npm install v-resize-observer
!vue@2.x
!vue@3.x
Resize observer for Vue.
Detect size changes of DOM elements. Support Vue's directive and component.
ResizeObservable API implementationvue2 and vue3npm
``
npm install v-resize-observer
browser
`html`
- Vue2.x Example
- Vue3.x Example
`html
Listened to elements
Listened to elements
`
js
// 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)
`$3
html
Listened to elements
Listened to elements
``
立即执行一次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)
- : elements size { width, height }
- : Listening elements
use
directive> The directive default name is
, if you want to change it, you can specify it when you import it.
`html
`
Parameter：
- : => delay
- : => resize
-
use
html
Listened to elements
`
$3
- : 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.$3
- resize: Triggered when listening for element size changes.ChangeLog
$3
#### 🚀 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.