Package Exports
- vue-resize
- vue-resize/dist/vue-resize.css
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-resize) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
vue-resize
Detect DOM element resizing
Sponsors
Installation
npm install --save vue-resizeModule import
⚠️ You need to include the package CSS:
import 'vue-resize/dist/vue-resize.css'Then import the package and install it into Vue:
import VueResize from 'vue-resize'
app.use(VueResize)Or:
import { ResizeObserver } from 'vue-resize'
app.component('resize-observer', ResizeObserver)Browser
<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>app.use(VueResize)Or:
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
<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>