vue-resize-observer

Vue普通元素resize事件监听

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-resize-observer
2.0.162 years ago4 years agoMinified + gzip package size for vue-resize-observer in KB

Readme

<img width="160" src="https://raw.githubusercontent.com/wangweiwei/vue-resize-observer/master/example/logo.png" alt="logo">


Vue Resize Observer


<img alt="Latest Version on NPM" src="https://img.shields.io/npm/v/vue-resize-observer" style="max-width:100%;">
<img alt="vue2" src="https://img.shields.io/badge/vue-2.x-brightgreen.svg" style="max-width:100%;">
<img alt="vue3" src="https://img.shields.io/badge/vue-3.x-brightgreen.svg" style="max-width:100%;">
<img alt="Issue" src="https://img.shields.io/badge/-help--wanted-brightgreen" style="max-width:100%;">
<img alt="Software License" src="https://img.shields.io/npm/l/vue-resize-observer" style="max-width:100%;">
<img alt="Contributors Anon" src="https://img.shields.io/github/contributors-anon/wangweiwei/vue-resize-observer" style="max-width:100%;">
<img alt="Code Size" src="https://img.shields.io/github/languages/code-size/wangweiwei/vue-resize-observer" style="max-width:100%;">

<img alt="Downloads" src="https://img.shields.io/npm/dt/vue-resize-observer.svg" style="max-width:100%;">
<img alt="Languages Count" src="https://img.shields.io/github/languages/count/wangweiwei/vue-resize-observer" style="max-width:100%;">
<img alt="Languages" src="https://img.shields.io/github/languages/top/wangweiwei/vue-resize-observer" style="max-width:100%;">
<img alt="Examle Online" src="https://img.shields.io/badge/-Example--Online-blue" style="max-width:100%;">


English | 简体中文
demo gif

Installation

  • Vue3.0
npm install --save vue-resize-observer@next
  • Vue2.0
npm install --save vue-resize-observer

Module import & Example

  • Import the package and install it into Vue:

const VueResizeObserver = require("vue-resize-observer");
// Vue3.0
const app = createApp(App)
app.use(VueResizeObserver) // use is a instance's method & be called before mount
app.mount('#app')
// Vue2.0
Vue.use(VueResizeObserver); // use is a static method

or
import VueResizeObserver from "vue-resize-observer";
Vue.use(VueResizeObserver);
// Vue3.0
const app = createApp(App)
app.use(VueResizeObserver) // use is a instance's method & be called before mount
app.mount('#app')
// Vue2.0
Vue.use(VueResizeObserver); // use is a static method

or
import VueResizeObserver from "vue-resize-observer";
// Vue3.0
Vue.createApp({
  directives: { 'resize': VueResizeObserver },
})
// Vue2.0
new Vue({
  directives: { 'resize': VueResizeObserver },
})

  • Then v-resize directive to detect DOM resize events.
<template>
  <div class="resize" v-resize="onResize">
    width: {{width}}, height: {{height}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      width: 0,
      height: 0,
    }
  },
  mounted() {
    this.width = this.$el.offsetWidth;
    this.height = this.$el.offsetHeight;
  },
  methods: {
    onResize({ width, height }) {
      this.width = width;
      this.height = height;
    }
  }
}
</script>

<style>
.resize {
  background-color: orange;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  resize: both;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

Example

Example Online

Documentation

npm run doc

Or read the documentation online
Read the Docs Online

⚠️ Notice

Set the v-resize directive for a DOM element and make the element position to something other than 'static' (for example 'relative').

Dependency

Dependency Status devDependency Status

License

Software License
Copyright (c) 2020-present, Wayne