vue-watch-resize
v0.1.0
Published
A Vue component that watches for size changes on its child nodes and emits an event.
Downloads
3
Readme
👀 Vue WatchResize
A Vue component that watches for size changes on its child nodes and emits an event.
💁🏼♂️ Introduction
WatchResize
is a Vue component that wraps child nodes in a <div>
and watches them for size changes. It uses watch-resize
and RxJS observables under the hood to achieve this.
🔗 Installation
Install via yarn
(recommended):
yarn add vue-watch-resize
Install via npm
:
npm install vue-watch-resize
🛠️ Usage
Importing
In TypeScript or ES6+:
import { WatchResize } from 'vue-watch-resize';
In UMD (using WatchResize
via a <script>
tag):
const WatchResize = VueWatchResize.WatchResize;
Vue.Component('watch-resize', WatchResize);
Events
| Name | Event Type | Description |
| --- | --- | --- |
| resize
| UIEvent
| Fires each time the component child nodes change size. |
Vue template example
<watch-resize @resize="myHandleResizeMethod($event)">
<!-- Child nodes that change size go here -->
</watch-resize>