Detect DOM element resizing
npm install --save vue-resize
import 'vue-resize/dist/vue-resize.css'Then import the package and install it into Vue:
import Vue from 'vue'
import VueResize from 'vue-resize'
Vue.use(VueResize)Or:
import Vue from 'vue'
import { ResizeObserver } from 'vue-resize'
Vue.component('resize-observer', ResizeObserver)<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>The plugin should be auto-installed. If not, you can install it manually:
Vue.use(VueResize)Or:
Vue.component('resize-observer', VueResize.ResizeObserver)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.
<template>
<div class="demo">
<h1>Hello world!</h1>
<resize-observer @notify="handleResize" />
</div>
</template>
<script>
export default {
methods: {
handleResize () {
console.log('resized')
}
}
}
</script>
<style scoped>
.demo {
position: relative;
}
</style>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent