Skip to content

stackbug/vue-resize-observer

 
 

Repository files navigation

Vue Resize Observer

Latest Version on NPM vue2 Download Count issue Software License

English | 简体中文

demo gif

Installation

npm install --save vue-resize-observer

Module import & Example

  • Import the package and install it into Vue:
const VueResizeObserver = require("vue-resize-observer");
Vue.use(VueResizeObserver);

or

import VueResizeObserver from "vue-resize-observer";
Vue.use(VueResizeObserver);
  • Then v-resize directive to detect DOM resize events.
<template>
  <div class="resize" v-resize="onResize">
    width: {{width}}, height: {{height}}
  </div>
</template>

<script>
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;
    }
  }
}
</script>

<style>
.resize {
  background-color: orange;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  resize: both;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

Example on codesandbox

Edit vue-resize-observer example

Documentation

npm run doc

⚠️ Notice

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

Dependency

Dependency Status devDependency Status

License

Software License

Copyright (c) 2020-present, Wayne

About

Vue Resize Observer

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • JavaScript 93.0%
  • HTML 4.4%
  • CSS 2.6%