Package Exports

vue-element-resize-detector

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-element-resize-detector) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-element-resize-detector

branches releases openIssues lastCommit license

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

Docs Link

element Resize Detector

🚀 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.