109 lines
2.0 KiB
Markdown
109 lines
2.0 KiB
Markdown
# vue-resize
|
|
|
|
[ ](https://www.npmjs.com/package/vue-resize)
|
|
[](https://vuejs.org/)
|
|
|
|
Detect DOM element resizing
|
|
|
|
[JSFiddle](https://jsfiddle.net/Akryum/zqygwf3r/)
|
|
|
|
<p>
|
|
<a href="https://www.patreon.com/akryum" target="_blank">
|
|
<img src="https://c5.patreon.com/external/logo/become_a_patron_button.png" alt="Become a Patreon">
|
|
</a>
|
|
</p>
|
|
|
|
## Sponsors
|
|
|
|
[](https://guillaume-chau.info/sponsors)
|
|
|
|
<br>
|
|
|
|
# Installation
|
|
|
|
```
|
|
npm install --save vue-resize
|
|
```
|
|
|
|
## Module import
|
|
|
|
**⚠️ You need to include the package CSS:**
|
|
|
|
```js
|
|
import 'vue-resize/dist/vue-resize.css'
|
|
```
|
|
|
|
Then import the package and install it into Vue:
|
|
|
|
```javascript
|
|
import VueResize from 'vue-resize'
|
|
|
|
app.use(VueResize)
|
|
```
|
|
|
|
Or:
|
|
|
|
```javascript
|
|
import { ResizeObserver } from 'vue-resize'
|
|
|
|
app.component('resize-observer', ResizeObserver)
|
|
```
|
|
|
|
## Browser
|
|
|
|
```html
|
|
<link rel="stylesheet" href="vue-resize/dist/vue-resize.css"/>
|
|
|
|
<script src="vue.js"></script>
|
|
<script src="vue-resize/dist/vue-resize.min.js"></script>
|
|
```
|
|
|
|
```javascript
|
|
app.use(VueResize)
|
|
```
|
|
|
|
Or:
|
|
|
|
```javascript
|
|
app.component('resize-observer', VueResize.ResizeObserver)
|
|
```
|
|
|
|
# Usage
|
|
|
|
Add the `<resize-observer>` inside a DOM element and make its position to something other than `'static'` (for example `'relative'`), so that the observer can fill it.
|
|
|
|
Listen to the `notify` event that is fired when the above DOM element is resized.
|
|
|
|
# Example
|
|
|
|
```html
|
|
<template>
|
|
<div class="demo">
|
|
<h1>Hello world!</h1>
|
|
<resize-observer @notify="handleResize" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
methods: {
|
|
handleResize ({ width, height }) {
|
|
console.log('resized', width, height)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.demo {
|
|
position: relative;
|
|
}
|
|
</style>
|
|
```
|
|
|
|
---
|
|
|
|
## License
|
|
|
|
[MIT](http://opensource.org/licenses/MIT)
|