@vue-toys/resize-observer
v1.0.4
Published
Resize observer directive for vue 3.0
Downloads
118
Maintainers
Readme
resize-observer
Resize observer directive for vue 3.0
Environment Support
Modern browsers
Installation
# yarn
yarn add @vue-toys/resize-observer
# or npm
npm install @vue-toys/resize-observer
Usage
global directive
in main.js
or main.ts
import { createApp } from 'vue'
import ResizeObserver from '@vue-toys/resize-observer'
import App from './App.vue'
const app = createApp(App)
app.use(Resize)
app.mount('#app')
in .vue
file template
<template>
<div v-resize="handleResize">
Hello world!
</div>
</template>
<script>
export default {
methods: {
handleResize({ width, height, offsetWidth, offsetHeight }) {
console.log({ width, height, offsetWidth, offsetHeight })
}
}
}
</script>
in .tsx
file
import { defineComponent, h, resolveDirective, withDirectives } from 'vue'
import { Size } from '@vue-toys/resize-observer'
const handleResize = (e: Size) => {
console.log(e)
}
export default defineComponent({
render() {
const vDemo = resolveDirective('resize')
return withDirectives(h('div'), [[vDemo, handleResize]])
},
})
without app.use
in .vue
file template
<template>
<div v-resize="handleResize">
Hello world!
</div>
</template>
<script>
import ResizeObserver from '@vue-toys/resize-observer';
export default {
directives: {
resize: ResizeObserver.directive,
},
methods: {
handleResize({ width, height, offsetWidth, offsetHeight }) {
console.log({ width, height, offsetWidth, offsetHeight })
}
}
}
</script>
in .tsx
file
import { defineComponent, h, resolveDirective, withDirectives } from 'vue'
import ResizeObserver, { Size } from '@vue-toys/resize-observer'
const handleResize = (e: Size) => {
console.log(e)
}
export default defineComponent({
render() {
const vDemo = ResizeObserver.directive
return withDirectives(h('div'), [[vDemo, handleResize]])
},
})
TODO
use @vue/test-utils
to test.