{"id":17345796,"url":"https://github.com/Marinerer/v-resize-observer","last_synced_at":"2025-02-26T01:33:06.940Z","repository":{"id":57398567,"uuid":"418746861","full_name":"Meqn/v-resize-observer","owner":"Meqn","description":"Resize observer for Vue. Detect size changes of DOM elements. 📡 检测DOM元素的尺寸变化, 支持Vue的指令和组件方式。","archived":false,"fork":false,"pushed_at":"2023-11-02T01:16:24.000Z","size":1172,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-04-14T03:05:45.475Z","etag":null,"topics":["resize","resize-observer","resizeobserver","vue","vue-component","vue-resize","vue-resize-observer"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/v-resize-observer","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Meqn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2021-10-19T02:51:52.000Z","updated_at":"2024-03-31T07:31:49.000Z","dependencies_parsed_at":"2022-09-04T03:21:22.942Z","dependency_job_id":"c280cf12-d21c-49b6-b450-fb2a5a78d005","html_url":"https://github.com/Meqn/v-resize-observer","commit_stats":{"total_commits":23,"total_committers":1,"mean_commits":23.0,"dds":0.0,"last_synced_commit":"11dd15f7f13c9a3cd7bb3898006e55f1b9334772"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Meqn%2Fv-resize-observer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Meqn%2Fv-resize-observer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Meqn%2Fv-resize-observer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Meqn%2Fv-resize-observer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Meqn","download_url":"https://codeload.github.com/Meqn/v-resize-observer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219843287,"owners_count":16556508,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["resize","resize-observer","resizeobserver","vue","vue-component","vue-resize","vue-resize-observer"],"created_at":"2024-10-15T16:43:44.882Z","updated_at":"2025-02-26T01:33:01.500Z","avatar_url":"https://github.com/Meqn.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# v-resize-observer\n\n[![version](https://img.shields.io/npm/v/v-resize-observer?style=flat-square)](https://www.npmjs.com/package/v-resize-observer)\n[![download](https://img.shields.io/npm/dm/v-resize-observer?style=flat-square)](https://www.npmjs.com/package/v-resize-observer)\n[![languages](https://img.shields.io/github/languages/top/meqn/v-resize-observer?style=flat-square)](https://github.com/Meqn/v-resize-observer)\n[![license](https://img.shields.io/npm/l/v-resize-observer?style=flat-square)](https://github.com/Meqn/v-resize-observer)\n![vue@2.x](https://img.shields.io/badge/Vue-2.x-brightgreen?style=flat-square)\n![vue@3.x](https://img.shields.io/badge/Vue-3.x-brightgreen?style=flat-square)\n\n\n\n[ [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) ]\n\n\n\nResize observer for Vue.  \nDetect size changes of DOM elements. Support Vue's directive and component.\n\n- [Vue2 Live](https://stackblitz.com/edit/vite-vue2-resize-demo?file=src%2FApp.vue)\n- [Vue3 Live](https://stackblitz.com/edit/vite-vue3-resize-demo?file=src%2FApp.vue)\n\n\n## Feature\n- 🕰 Based on `ResizeObservable API` implementation\n- 🎁 Support `vue2` and `vue3`\n- 💊 Support the use of directives or components\n- 🧲 Optimize the frequency of triggering resize events\n- 🛠 Support browsers: IE9+/Edge/Chrome/Safari/Firefox\n\n\n\n## Install\n\n**npm**\n```\nnpm install v-resize-observer\n```\n\n**browser**\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue-demi/lib/index.iife.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/v-resize-observer/dist/index.iife.js\"\u003e\u003c/script\u003e\n```\n\n\n## Usage\n\n- [Vue2.x Example](https://github.com/Meqn/v-resize-observer/tree/main/examples/vue2)\n- [Vue3.x Example](https://github.com/Meqn/v-resize-observer/tree/main/examples/vue3)\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003c!-- directives --\u003e\n    \u003cdiv v-resize:50.immediate=\"onResize\"\u003e\n      Listened to elements\n    \u003c/div\u003e\n    \n    \u003c!-- Components --\u003e\n    \u003cResizeComponent @resize=\"onResize\" :delay=\"100\" :disabled=\"disabled\"\u003e\n      \u003cdiv\u003eListened to elements\u003c/div\u003e\n    \u003c/ResizeComponent\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { ref } from 'vue'\nimport { ResizeComponent, resizeDirective as vResize } from 'v-resize-observer'\n\nconst disabled = ref(false)\n\nfunction onResize({ width, height }, target) {\n  console.log(target, width, height)\n}\n\u003c/script\u003e\n```\n\n### 1. Global Configuration\n```js\n// main.js\nimport Resizer from 'v-resize-observer'\n\n// vue@3.x\nconst app = createApp(App)\napp.use(Resizer, {\n  // Custom command names and component names\n  directive: 'resize',\n  component: 'ResizeComponent'\n})\n\n// vue@2.x\nVue.use(Resizer)\n```\n\n### 2. On demand\n```html\n\u003cscript setup\u003e\nimport { ref } from 'vue'\nimport {\n  ResizeComponent,\n  resizeDirective as vResizeObserver //You can change the directive name, the default: `v-resize, \n} from 'v-resize-observer'\n\n// OR\n// import Resizer from 'v-resize-observer'\n// const ResizeComponent = Resizer.component\n// const vResize = Resizer.directive\n\nfunction onResize({ width, height }, target) {\n  console.log(target, width, height)\n}\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003c!-- directives --\u003e\n    \u003cdiv v-resize-observer:100=\"onResize\"\u003e\n      Listened to elements\n    \u003c/div\u003e\n    \n    \u003c!-- Components --\u003e\n    \u003cResizeComponent @resize=\"onResize\"\u003e\n      \u003cdiv\u003eListened to elements\u003c/div\u003e\n    \u003c/ResizeComponent\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n立即执行一次callback\n\n## API\n| Parameter  | Type                    | Default | Description                                             |\n| ---------- | ----------------------- | ------- | ------------------------------------------------------- |\n| `target`   | `string`, `HTMLElement` | -       | Target elements to listen to                            |\n| `delay`    | `number`                | `150`   | Delayed execution time                                  |\n| `immediate` | `boolean`               | `false` | executed immediately                                       |\n| `disabled` | `boolean`               | `false` | disable listening                                       |\n| `resize`   | `function`              | -       | Callback function to listen for changes in element size |\n\n\n`resize(data, target)`\n- `data` : elements size `{ width, height }`\n- `target` : Listening elements\n\n\n## use `directive`\n\n\u003e The directive default name is `v-resize`, if you want to change it, you can specify it when you import it.\n\n\n```html\n\u003cdiv v-resize=\"onResize\" /\u003e\n\n\u003cdiv v-resize:100=\"onResize\" /\u003e\n\u003cdiv v-resize:100.immediate=\"onResize\" /\u003e\n\u003c!-- No limit on trigger frequency --\u003e\n\u003cdiv v-resize:0=\"onResize\" /\u003e\n```\n**Parameter：**\n- `arg`: =\u003e `delay`\n- `value`: =\u003e `resize`\n- `modifiers.immediate`\n\n\n## use `Component`\n```html\n\u003cResizeComponent target=\"#app\" :delay=\"0\" disabled=\"false\" @resize=\"onResize\"\u003e\n  \u003cdiv\u003eListened to elements\u003c/div\u003e\n\u003c/ResizeComponent\u003e\n```\n### props\n- `target`: The target element to listen to, the default current element.\n- `delay`: Delay execution time, default: `150`.\n- `immediate`: Execute immediately, default: `false`.\n- `disabled`: disable listening, default: `false`.\n\n### events\n- `resize`: Triggered when listening for element size changes.\n\n\n\n## ChangeLog\n\n### v2.0.0\n#### 🚀 Features\n- feat: compatible with vue2.x and 3.x;\n- feat: add Typescript type hints;\n- feat: support for global registration of custom directive names and component names;\n- feat: add re-listening function;\n- perf: remove the `limiter` trigger limit option;\n- perf: change the delay time `wait` to `delay`;\n\n#### 🐞 Bug Fixes\n- fix: Fixed failure to listen again after disabling listening.\n\n### v1.x\n- [v1.x Documents](https://meqn.github.io/v-resize-observer/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMarinerer%2Fv-resize-observer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMarinerer%2Fv-resize-observer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMarinerer%2Fv-resize-observer/lists"}