vue-resize-observer

Vue Resize Observer

English | 简体中文

!demo gif

Installation

- Vue3.0
`` sh
npm install --save vue-resize-observer@next
`
- Vue2.0
` sh
npm install --save vue-resize-observer
`

Module import & Example

* Import the package and install it into Vue:

` js
const VueResizeObserver = require("vue-resize-observer");
// Vue3.0
const app = createApp(App)
app.use(VueResizeObserver) // use is a instance's method & be called before mount
app.mount('#app')
// Vue2.0
Vue.use(VueResizeObserver); // use is a static method
`

or

` js
import VueResizeObserver from "vue-resize-observer";
Vue.use(VueResizeObserver);
// Vue3.0
const app = createApp(App)
app.use(VueResizeObserver) // use is a instance's method & be called before mount
app.mount('#app')
// Vue2.0
Vue.use(VueResizeObserver); // use is a static method
`

or

` js
import VueResizeObserver from "vue-resize-observer";
// Vue3.0
Vue.createApp({
directives: { 'resize': VueResizeObserver },
})
// Vue2.0
new Vue({
directives: { 'resize': VueResizeObserver },
})
`


* Then v-resize directive to detect DOM resize events.
` vue



`

Example

![Example Online](https://www.ellow.cn/examples/vue-resize-observer/index.html)

Documentation

` sh
npm run doc
`

Or read the documentation online

![Read the Docs Online](https://www.ellow.cn/docs/vue-resize-observer/index.html)

⚠️ Notice

Set the v-resize` directive for a DOM element and make the element position to something other than 'static' (for example 'relative').

Dependency


License


Copyright (c) 2020-present, Wayne