vue-resize-observer

    1.0.37 • Public • Published

    logo

    Vue Resize Observer

    Latest Version on NPM vue2 vue3 Issue Software License Contributors Anon Code Size
    Downloads Languages Count Languages Examle Online

    English | 简体中文

    demo gif

    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
    
    • 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

    Example Online

    Documentation

    npm run doc
    

    Or read the documentation online

    Read the Docs 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

    Dependency Status devDependency Status

    License

    Software License

    Copyright (c) 2020-present, Wayne

    Install

    npm i vue-resize-observer

    DownloadsWeekly Downloads

    1,388

    Version

    1.0.37

    License

    MIT

    Unpacked Size

    32.9 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar