Vue Resize Observer

English | 简体中文

Installation

• Vue3.0

  npm install --save vue-resize-observer@next

• Vue2.0

  npm install --save vue-resize-observer

Module import & Example

• Import the package and install it into Vue:

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

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

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.

  
  <template>
  <div class="resize" v-resize="onResize">
  width: {{width}}, height: {{height}}
  </div>
  </template>

## Example

[![Example Online](https://img.shields.io/badge/-Example--Online-blue?style=for-the-badge&logo=internet-explorer)](https://www.ellow.cn/examples/vue-resize-observer/index.html)

## Documentation

``` sh
npm run doc

Or read the documentation online

⚠️ 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