vue-element-resize-detector
Vue Directive to detect resize events on elements or components. Uses element Resize Detector under the hood
⚙️ Installation
$ npm install vue-element-resize-detector
📄 Documents
🚀 How to use in Vue
In main.js
import resize from "vue-element-resize-detector"; Vue.use(resize)
<template> <div id="app"> <h1>Vue Element Resize Detector</h1> <div v-resize @resize="onResize">This divs with is: {{ width }}</div> </div></template> <script>export default { name: "app", data() { return { width: 0 }; }, methods: { onResize(e) { console.log("resize event", e.detail.width, e.detail.height); this.width = e.detail.width; } }};</script> <style>#app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}</style>
⭐️ Show Your Support
Please give a ⭐️ if this project helped you!
👏 Contributing
If you have any questions or requests or want to contribute to vue-element-resize-detector
or other packages, please write the issue or give me a Pull Request freely.
🐞 Bug Report
If you find a bug, please report to us opening a new Issue on GitHub.
⚙️ Development
npm run serve
Runs the app in the development mode.
Open http://localhost:8080 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.