vue-resize-observer

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

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

    2,381

    Version

    2.0.16

    License

    MIT

    Unpacked Size

    38.5 kB

    Total Files

    7

    Last publish

    Collaborators

    • dengfengwang