1.2.0 β’ Published 1 year ago
resize-observer-vue v1.2.0
resize-observer-vue
πββοΈ docs
Or if you want to use react π€ΈββοΈ for react
The width of the case box is 100% by default. You need to manually switch the viewport width
whatοΌπ
Whether the size and location of the listening component have changed, Only support vue3
How to use it? π
pnpm add resize-observer-vue
1. Similar to the use of react high-order components
import
import { createApp } from 'vue'
import ResizeObserver from 'resize-observer-vue'
import App from './example/App.vue'
const app = createApp(App)
app.use(ResizeObserver).mount('#app')
Or introduced as a component
import { ResizeObserver } from 'resize-observer-vue'
use
<ResizeObserver :on-resize="callback" :disabled="false">
<TargetComponent/>
<ResizeObserver/>
2. The same supports vue instructions
registration Directive
import { directive } from 'resize-observer-vue'
const app = createApp({})
app.directive('resize', directive)
use
<TargetComponent v-resize:[disabled]="callback" />
API
Property | Type | Default | Description |
---|---|---|---|
disabled | boolean | false | Whether to disable observation |
onResize | ({ width, height }) => void | - | Trigger when child node resized |