Description:
An easy resize observer directive for Vue.js 3 and 2.
Basic usage:
1. Import and register the Resize Observer.
import VueResizeObserver from "vue-resize-observer"; // for Vue 3.0 const app = createApp(App) app.use(VueResizeObserver) app.mount('#app') // for Vue2.0 Vue.use(VueResizeObserver);
2. Detect resize event on an element.
<div class="resize" v-resize="onResize"> width: {{width}}, height: {{height}} </div>
export default { data() { return { width: 0, height: 0, } }, mounted() { this.width = this.$el.offsetWidth; this.height = this.$el.offsetHeight; }, methods: { onResize({ width, height }) { this.width = width; this.height = height; } } }
Preview:
Download Details:
Author: wangweiwei
Live Demo: https://www.ellow.cn/examples/vue-resize-observer/index.html
Download Link: https://github.com/wangweiwei/vue-resize-observer/archive/master.zip
Official Website: https://github.com/wangweiwei/vue-resize-observer
Install & Download:
# NPM
$ npm i [email protected]