vue-resize-directive

    1.2.0 • Public • Published

    Vue.resize

    GitHub open issues GitHub closed issues Npm download Npm version vue2 MIT License

    Vue directive to detect HTML resize events based on CSS Element Queries with debouncing and throttling capacity.

    Demo

    demo gif

    Typical usage

    Simple

    Use this option when you need to receive all the resize events.

    The onResize function will be called each time the element resizes with the corresponding HTML element as only argument.

    <div v-resize="onResize">

    Throttle

    Use throttle when you need to rate-limit resize events frequency.

    • With default timeout (150 ms):
    <div v-resize:throttle="onResize">
    • With custom timeout (in ms):
    <div v-resize:throttle.100="onResize">

    Debounce

    Use debounce when you only need to be notified when resize events ends.

    • With default timeout (150 ms):
    <div v-resize:debounce="onResize">
    • With custom timeout (in ms):
    <div v-resize:debounce.50="onResize">

    Initial

    Use this option to receive the resize callback right after the element is mounted on the DOM and visible.

    <div v-resize.initial="onResize">

    Installation

    • Available through npm:
     npm install vue-resize-directive --save
    • For Modules
    // ES6
    import resize from 'vue-resize-directive'
    //...
    export default {
        directives: {
            resize,
        }
    //...
      
    // ES5
    var resize = require('vue-resize-directive')
    • #### For <script> Include

      Just include Vueresize.js after ResizeSensor.js from css-element-queries and lodash.js script.

    Install

    npm i vue-resize-directive

    DownloadsWeekly Downloads

    18,080

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    137 kB

    Total Files

    5

    Last publish

    Collaborators

    • davidesmaisons