2.0.16 • Published 3 years ago
vue-resize-observer v2.0.16
English | 简体中文
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
Documentation
npm run doc
Or read the documentation 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
License
Copyright (c) 2020-present, Wayne
2.0.16
3 years ago
1.0.37
3 years ago
2.0.15
3 years ago
2.0.13
3 years ago
2.0.3
3 years ago
2.0.2
3 years ago
2.0.5
3 years ago
2.0.11
3 years ago
2.0.7
3 years ago
2.0.12
3 years ago
2.0.6
3 years ago
2.0.9
3 years ago
2.0.10
3 years ago
2.0.8
3 years ago
2.0.1
3 years ago
2.0.0
3 years ago
1.0.33
3 years ago
1.0.36
3 years ago
1.0.35
3 years ago
1.0.32
4 years ago
1.0.31
4 years ago
1.0.29
4 years ago
1.0.28
4 years ago
1.0.27
4 years ago
1.0.30
4 years ago
1.0.26
4 years ago
1.0.25
4 years ago
1.0.22
4 years ago
1.0.23
4 years ago
1.0.21
4 years ago
1.0.20
4 years ago
1.0.19
4 years ago
1.0.18
4 years ago
1.0.16
4 years ago
1.0.15
4 years ago
1.0.13
4 years ago
1.0.9
4 years ago
1.0.11
4 years ago
1.0.10
4 years ago
1.0.12
4 years ago
1.0.8
4 years ago
1.0.7
4 years ago
1.0.6
4 years ago
1.0.5
4 years ago
1.0.2
4 years ago
1.0.3
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago