https://github.com/david-desmaisons/vue.resize

Vue directive to detect resize events with deboucing and throttling capacity.
https://github.com/david-desmaisons/vue.resize

resize-events vue-directive vuejs2

Last synced: 3 months ago
JSON representation

Vue directive to detect resize events with deboucing and throttling capacity.

• Host: GitHub
• URL: https://github.com/david-desmaisons/vue.resize
• Owner: David-Desmaisons
• License: mit
• Created: 2017-01-03T01:05:50.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2020-03-23T19:49:23.000Z (over 5 years ago)
• Last Synced: 2025-04-13T05:08:22.840Z (3 months ago)
• Topics: resize-events, vue-directive, vuejs2
• Language: JavaScript
• Homepage:
• Size: 2.29 MB
• Stars: 326
• Watchers: 8
• Forks: 36
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Vue.resize

[![GitHub open issues](https://img.shields.io/github/issues/David-Desmaisons/Vue.resize.svg)](https://github.com/David-Desmaisons/Vue.resize/issues?q=is%3Aopen+is%3Aissue)

[![GitHub closed issues](https://img.shields.io/github/issues-closed/David-Desmaisons/Vue.resize.svg)](https://github.com/David-Desmaisons/Vue.resize/issues?q=is%3Aissue+is%3Aclosed)

[![Npm download](https://img.shields.io/npm/dt/vue-resize-directive.svg)](https://www.npmjs.com/package/vue-resize-directive)

[![Npm version](https://img.shields.io/npm/v/vue-resize-directive.svg)](https://www.npmjs.com/package/vue-resize-directive)

[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)

[![MIT License](https://img.shields.io/github/license/David-Desmaisons/Vue.resize.svg)](https://github.com/David-Desmaisons/Vue.resize/blob/master/LICENSE)

Vue directive to detect HTML resize events based on [CSS Element Queries](https://github.com/marcj/css-element-queries) with debouncing and throttling capacity.

## Demo

![demo gif](vueresize.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.

```javascript



```


### Throttle

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

* With default timeout (150 ms):

```HTML



```


* With custom timeout (in ms):

```HTML



```


### Debounce

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

* With default timeout (150 ms):

```HTML



```


* With custom timeout (in ms):

```HTML



```


### Initial

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

```HTML



```


## Installation

- Available through npm:

``` js

 npm install vue-resize-directive --save

```

- For Modules

``` js

// ES6

import resize from 'vue-resize-directive'

//...

export default {

    directives: {

        resize,

    }

//...

  

// ES5

var resize = require('vue-resize-directive')

```

- #### For `` Include

  Just include `Vueresize.js` after `ResizeSensor.js` from [css-element-queries](https://github.com/marcj/css-element-queries) and `lodash.js` script.<br>