vue-resize-next
Detect DOM element resizing based on Vue3.x
Installation
npm install --save vue-resize-next
with yarn
npm install --save vue-resize-next
Then import the package and install it into Vue:
import VueResize from 'vue-resize-next'
app.use(VueResize)
// or in a component
// components: { VueResize }Usage
Add the <vue-resize> 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>
<vue-resize @notify="handleResize" />
</div>
</template>
<script>
export default {
methods: {
handleResize ({ width, height }) {
console.log('resized', width, height)
}
}
}
</script>
<style scoped>
.demo {
position: relative;
}
</style>
5 Oct 12, 2022
15 Aug 27, 2022
202 Nov 2, 2022
6 Sep 13, 2021
1 Jul 13, 2019
0 Apr 6, 2019
92 Dec 12, 2022
8.5k Jan 9, 2023
0 Nov 8, 2018
0 Apr 23, 2021
0 Oct 27, 2020
169 Jan 1, 2023
108 Dec 27, 2022
0 Jul 29, 2019
356 Dec 23, 2022
145 Nov 16, 2022
0 Oct 28, 2021
403 Dec 2, 2022