Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/meqn/v-resize-observer
Resize observer for Vue. Detect size changes of DOM elements. 📡 检测DOM元素的尺寸变化, 支持Vue的指令和组件方式。
https://github.com/meqn/v-resize-observer
resize resize-observer resizeobserver vue vue-component vue-resize vue-resize-observer
Last synced: 22 days ago
JSON representation
Resize observer for Vue. Detect size changes of DOM elements. 📡 检测DOM元素的尺寸变化, 支持Vue的指令和组件方式。
- Host: GitHub
- URL: https://github.com/meqn/v-resize-observer
- Owner: Meqn
- Created: 2021-10-19T02:51:52.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-11-02T01:16:24.000Z (about 1 year ago)
- Last Synced: 2024-04-14T03:05:45.475Z (7 months ago)
- Topics: resize, resize-observer, resizeobserver, vue, vue-component, vue-resize, vue-resize-observer
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/v-resize-observer
- Size: 1.12 MB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# v-resize-observer
[](https://www.npmjs.com/package/v-resize-observer)
[](https://www.npmjs.com/package/v-resize-observer)
[](https://github.com/Meqn/v-resize-observer)
[](https://github.com/Meqn/v-resize-observer)
![[email protected]](https://img.shields.io/badge/Vue-2.x-brightgreen?style=flat-square)
![[email protected]](https://img.shields.io/badge/Vue-3.x-brightgreen?style=flat-square)
[ [English](https://github.com/Meqn/v-resize-observer/blob/main/libs/README.zh_CN.md) | [中文](https://github.com/Meqn/v-resize-observer/blob/main/libs/README.zh_CN.md) ]
Resize observer for Vue.
Detect size changes of DOM elements. Support Vue's directive and component.
- [Vue2 Live](https://stackblitz.com/edit/vite-vue2-resize-demo?file=src%2FApp.vue)
- [Vue3 Live](https://stackblitz.com/edit/vite-vue3-resize-demo?file=src%2FApp.vue)
## Feature
- 🕰 Based on `ResizeObservable API` implementation
- 🎁 Support `vue2` and `vue3`
- 💊 Support the use of directives or components
- 🧲 Optimize the frequency of triggering resize events
- 🛠 Support browsers: IE9+/Edge/Chrome/Safari/Firefox
## Install
**npm**
```
npm install v-resize-observer
```
**browser**
```html
```
## Usage
- [Vue2.x Example](https://github.com/Meqn/v-resize-observer/tree/main/examples/vue2)
- [Vue3.x Example](https://github.com/Meqn/v-resize-observer/tree/main/examples/vue3)
```html
Listened to elements
Listened to elements
import { ref } from 'vue'
import { ResizeComponent, resizeDirective as vResize } from 'v-resize-observer'
const disabled = ref(false)
function onResize({ width, height }, target) {
console.log(target, width, height)
}
```
### 1. Global Configuration
```js
// main.js
import Resizer from 'v-resize-observer'
// [email protected]
const app = createApp(App)
app.use(Resizer, {
// Custom command names and component names
directive: 'resize',
component: 'ResizeComponent'
})
// [email protected]
Vue.use(Resizer)
```
### 2. On demand
```html
import { ref } from 'vue'
import {
ResizeComponent,
resizeDirective as vResizeObserver //You can change the directive name, the default: `v-resize,
} from 'v-resize-observer'
// OR
// import Resizer from 'v-resize-observer'
// const ResizeComponent = Resizer.component
// const vResize = Resizer.directive
function onResize({ width, height }, target) {
console.log(target, width, height)
}
Listened to elements
Listened to elements
```
立即执行一次callback
## API
| Parameter | Type | Default | Description |
| ---------- | ----------------------- | ------- | ------------------------------------------------------- |
| `target` | `string`, `HTMLElement` | - | Target elements to listen to |
| `delay` | `number` | `150` | Delayed execution time |
| `immediate` | `boolean` | `false` | executed immediately |
| `disabled` | `boolean` | `false` | disable listening |
| `resize` | `function` | - | Callback function to listen for changes in element size |
`resize(data, target)`
- `data` : elements size `{ width, height }`
- `target` : Listening elements
## use `directive`
> The directive default name is `v-resize`, if you want to change it, you can specify it when you import it.
```html
```
**Parameter：**
- `arg`: => `delay`
- `value`: => `resize`
- `modifiers.immediate`
## use `Component`
```html
Listened to elements
```
### props
- `target`: The target element to listen to, the default current element.
- `delay`: Delay execution time, default: `150`.
- `immediate`: Execute immediately, default: `false`.
- `disabled`: disable listening, default: `false`.
### events
- `resize`: Triggered when listening for element size changes.
## ChangeLog
### v2.0.0
#### 🚀 Features
- feat: compatible with vue2.x and 3.x;
- feat: add Typescript type hints;
- feat: support for global registration of custom directive names and component names;
- feat: add re-listening function;
- perf: remove the `limiter` trigger limit option;
- perf: change the delay time `wait` to `delay`;
#### 🐞 Bug Fixes
- fix: Fixed failure to listen again after disabling listening.
### v1.x
- [v1.x Documents](https://meqn.github.io/v-resize-observer/)