{"_id":"@deot/helper-resize","_rev":"5-26eab5c48dc37286a685e4bd4e15736e","name":"@deot/helper-resize","dist-tags":{"latest":"1.1.4"},"versions":{"1.0.1":{"name":"@deot/helper-resize","version":"1.0.1","license":"MIT","_id":"@deot/helper-resize@1.0.1","maintainers":[{"name":"deot","email":"zrd0921@qq.com"}],"dist":{"shasum":"8ff8113c23a0c805f2fffdc6d1a59efa1bb36a19","tarball":"https://registry.npmjs.org/@deot/helper-resize/-/helper-resize-1.0.1.tgz","fileCount":7,"integrity":"sha512-hCQ0kTDXylAaXRiJ2TY0poaRcqRhHM6oOSOm0xN7J5+/lVTd9SdUPo0KSwf6oiv+jfqzH9nLE/v74T8HPJ5fLA==","signatures":[{"sig":"MEUCIB6DzbZHhg87JhJ+m4qEJd9wxTM1mvQSCQdxomRh2hUoAiEA1aPWeB0trkf8z9D7WKea2XAEjrN/UppV2FdC7uQdvjI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8204},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.cjs.js"}},"gitHead":"1715846b4800a29e490550d12e2bc12daac1361e","_npmUser":{"name":"deot","email":"zrd0921@qq.com"},"_npmVersion":"9.5.1","description":"- `MutationObserver`: DOM元素的属性或者节点变化的检测 - `ResizeObserver`: 检测DOM尺寸变化JS","directories":{},"_nodeVersion":"18.16.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"resize-observer-polyfill":"^1.5.1"},"_npmOperationalInternal":{"tmp":"tmp/helper-resize_1.0.1_1689263252833_0.45098044248465374","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@deot/helper-resize","version":"1.1.0","license":"MIT","_id":"@deot/helper-resize@1.1.0","maintainers":[{"name":"deot","email":"zrd0921@qq.com"}],"dist":{"shasum":"8cf7e5ab21845e2b60a10d2c5af84c6e36e4700c","tarball":"https://registry.npmjs.org/@deot/helper-resize/-/helper-resize-1.1.0.tgz","fileCount":7,"integrity":"sha512-pa0sf/1kyx0HOPe2R4ST4rdnGemaAdM4nJoFSdMz1C7NTQvSuxN5pG3aIiZmfb4q7FaUr7Pxv7JskUSlLAsQzQ==","signatures":[{"sig":"MEQCIHbOjpO26Kd/gXiZKC+FjvhpC5fuXS/SLsBxJyZP/QjyAiA/8rJi1BGMszs7FS3eGViGGn4fMnj4NBPbQXf35Hu6PA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8191},"main":"dist/index.es.js","type":"module","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.cjs.js"}},"gitHead":"aa9e40ce9edfdf36ab99d6a77571d691acaf03f9","_npmUser":{"name":"deot","email":"zrd0921@qq.com"},"_npmVersion":"9.8.0","description":"- `MutationObserver`: DOM元素的属性或者节点变化的检测 - `ResizeObserver`: 检测DOM尺寸变化JS","directories":{},"_nodeVersion":"20.5.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"resize-observer-polyfill":"^1.5.1"},"_npmOperationalInternal":{"tmp":"tmp/helper-resize_1.1.0_1692857135551_0.7093083956486581","host":"s3://npm-registry-packages"}},"1.1.1":{"name":"@deot/helper-resize","version":"1.1.1","license":"MIT","_id":"@deot/helper-resize@1.1.1","maintainers":[{"name":"deot","email":"zrd0921@qq.com"}],"dist":{"shasum":"569e1174c8610461d83e29b899cad033aec9d9b4","tarball":"https://registry.npmjs.org/@deot/helper-resize/-/helper-resize-1.1.1.tgz","fileCount":7,"integrity":"sha512-xrFsgoY8MtO8gm8Cn6XlHqulr2BY0DGnzv21nkyQ7x4V/ymQGDWggaTZqS1JQL4QY2Cqo/UPb7SKjRnY+hs6rw==","signatures":[{"sig":"MEYCIQC6CBGVg5a5L7kYB6+KsN/Was4krz4tzOcOQKBGr5nTegIhAL2QnM4UMLH4QOnRiZLWCXaNNYnSP/4NCeM+I1H5yWPr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8188},"main":"dist/index.es.js","type":"module","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.cjs"}},"gitHead":"cb85757afa34ff538c72073a6799f866fc40509c","_npmUser":{"name":"deot","email":"zrd0921@qq.com"},"_npmVersion":"9.8.0","description":"- `MutationObserver`: DOM元素的属性或者节点变化的检测 - `ResizeObserver`: 检测DOM尺寸变化JS","directories":{},"_nodeVersion":"20.5.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"resize-observer-polyfill":"^1.5.1"},"_npmOperationalInternal":{"tmp":"tmp/helper-resize_1.1.1_1692930938625_0.4345089600948173","host":"s3://npm-registry-packages"}},"1.1.3":{"name":"@deot/helper-resize","version":"1.1.3","license":"MIT","_id":"@deot/helper-resize@1.1.3","maintainers":[{"name":"deot","email":"zrd0921@qq.com"}],"dist":{"shasum":"9520eb9b1b2043e83c602c4d4b5214034660d50a","tarball":"https://registry.npmjs.org/@deot/helper-resize/-/helper-resize-1.1.3.tgz","fileCount":7,"integrity":"sha512-AXYK+0D+iTtwS57JzDF2+GIh16zml91Vv/VX0R97to8BG0/C9M7aIBo01OMPcHWY2aHJezr60rWWiwrod/YNhA==","signatures":[{"sig":"MEUCIHWrhrlVQQCW7r+Szb47sJIWags4S+YBWfmtFTzzP5OvAiEA4/RY8eoxbPV5u9HNL8d22p2bHXgx3mD2GXX+4FkDLAM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7790},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"980a65f7e7e40322974c1719f22e4011687b78c1","_npmUser":{"name":"deot","email":"zrd0921@qq.com"},"_npmVersion":"10.2.3","description":"- `MutationObserver`: DOM元素的属性或者节点变化的检测 - `ResizeObserver`: 检测DOM尺寸变化JS","directories":{},"_nodeVersion":"21.2.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"resize-observer-polyfill":"^1.5.1"},"_npmOperationalInternal":{"tmp":"tmp/helper-resize_1.1.3_1700642939571_0.44383884858538303","host":"s3://npm-registry-packages"}},"1.1.4":{"_id":"@deot/helper-resize@1.1.4","dist":{"shasum":"eafd5fe5b53e5da7917f4e883dee489d643f2b62","tarball":"https://registry.npmjs.org/@deot/helper-resize/-/helper-resize-1.1.4.tgz","fileCount":7,"integrity":"sha512-5jYHtmFpP1ybjLNDGY9g66MxWE5xExHka5VB1jAbHn7D/i67/Rq4JcURmBxQl14+GFWomQCjQ7wL1dDxaW4EcA==","signatures":[{"sig":"MEYCIQC9oGakHlXJXI5e3cZkDMtRtQ+v63I46hy9pVIMn4u6UgIhALeapG7Y0LlNvI+T9mHJJSbYo70xhaGHaC7r7dCXy/JI","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGyfmWmFHj6ZL47lGLcomnUrTj7i9tQEW0bzd70MMkDSAiEApyFsTDfUW9BE2+lVTOlCofUWlrdM9aGEUlGy6biyntk="}],"unpackedSize":11457},"main":"dist/index.js","name":"@deot/helper-resize","type":"module","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"65b589d8a3a622a3bae75f64f8286e8ec8ba8870","license":"MIT","version":"1.1.4","_npmUser":{"name":"deot","email":"zrd0921@qq.com"},"_npmVersion":"11.19.0","description":"基于原生 `ResizeObserver` 监听元素尺寸变化，并在同一元素的多个实例之间复用 observer 和 listeners。","directories":{},"maintainers":[{"name":"deot","email":"zrd0921@qq.com"}],"_nodeVersion":"24.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"resize-observer-polyfill":"^1.5.1"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/helper-resize_1.1.4_1790303618795_0.970124713604674"}}},"time":{"created":"2023-07-13T15:47:32.727Z","modified":"2026-09-25T02:33:39.104Z","1.0.1":"2023-07-13T15:47:33.061Z","1.1.0":"2023-08-24T06:05:35.726Z","1.1.1":"2023-08-25T02:35:38.800Z","1.1.3":"2023-11-22T08:48:59.740Z","1.1.4":"2026-09-25T02:33:38.904Z"},"license":"MIT","description":"基于原生 `ResizeObserver` 监听元素尺寸变化，并在同一元素的多个实例之间复用 observer 和 listeners。","maintainers":[{"name":"deot","email":"zrd0921@qq.com"}],"readme":"# @deot/helper-resize\n\n基于原生 `ResizeObserver` 监听元素尺寸变化，并在同一元素的多个实例之间复用 observer 和 listeners。\n\n## 安装\n\n```bash\npnpm add @deot/helper-resize\n```\n\n## 使用\n\n```ts\nimport { Resize } from '@deot/helper-resize';\n\nconst off = Resize.of(element).on(() => {\n\treturn element.offsetWidth;\n});\n\noff();\n```\n\n也可以使用静态快捷方法或从聚合包导入：\n\n```ts\nimport { Resize } from '@deot/helper';\n\nconst listener = () => {};\nResize.on(element, listener);\nResize.off(element, listener);\n```\n\n## API\n\n### Resize\n\n以元素为单位管理 `ResizeObserver`，实例方法与静态方法共享监听状态。\n\n#### `new Resize(element)`\n\n创建实例；复用元素上已有监听状态\n\n| 参数 | 参数类型 | 返回值 |\n| --- | --- | --- |\n| `element` | `HTMLElement` | `Resize` |\n\n#### `Resize.of(element)`\n\n创建实例的工厂方法\n\n| 参数 | 参数类型 | 返回值 |\n| --- | --- | --- |\n| `element` | `HTMLElement` | `Resize` |\n\n#### `Resize.on(element, listener)`\n\n静态注册监听并返回解绑函数\n\n| 参数 | 参数类型 | 返回值 |\n| --- | --- | --- |\n| `element`、`listener` | `HTMLElement`、`() => any` | `() => void` |\n\n#### `Resize.off(element, listener?)`\n\n删除指定监听；省略 listener 时删除全部\n\n| 参数 | 参数类型 | 返回值 |\n| --- | --- | --- |\n| `element`、`listener` | `HTMLElement`、`() => any` | `void` |\n\n#### `Resize.on(listener)`\n\n注册实例监听；首次注册时创建 ResizeObserver\n\n| 参数 | 参数类型 | 返回值 |\n| --- | --- | --- |\n| `listener` | `() => any` | `() => void` |\n\n#### `Resize.off(listener?)`\n\n删除指定或全部监听；清空后断开 observer\n\n| 参数 | 参数类型 | 返回值 |\n| --- | --- | --- |\n| `listener` | `() => any` | `void` |\n\n#### `Resize.handleResize(entries)`\n\nobserver 回调；仅在 entries 包含当前元素时通知 listeners\n\n| 参数 | 参数类型 | 返回值 |\n| --- | --- | --- |\n| `entries` | `ResizeObserverEntry[]` | `void` |\n\n#### `Resize.el`\n\n当前监听元素\n\n| 类型 |\n| --- |\n| `HTMLElement` |\n\n#### `Resize.listeners`\n\n当前元素的监听函数；同一元素创建的实例会复用该数组\n\n| 类型 | 类型 |\n| --- | --- |\n| `Function[]` | `[]` |\n\n#### `Resize.ro`\n\n首次监听后创建的 observer\n\n| 类型 | 类型 |\n| --- | --- |\n| `ResizeObserver \\| null` | `null` |\n\n回调仅在 observer entries 包含目标元素时执行。环境没有 `ResizeObserver` 时，`on()` 返回空解绑函数，不会抛错。\n\n切换目标宽度，观察实例方法和静态方法共享同一元素监听状态：\n\n:::playground\n<!--\n<config lang=\"json5\">\n{\n\tviews: ['runtime', 'files']\n}\n</config>\n-->\n```vue\n<script setup>\n/* eslint-disable no-useless-assignment */\nimport { nextTick, onBeforeUnmount, onMounted, ref } from 'vue';\nimport { Resize } from '@deot/helper-resize';\n\nconst box = ref(null);\nconst width = ref(180);\nconst output = ref({ instanceCount: 0, staticCount: 0, width: 180 });\nlet offInstance = () => {};\nlet staticListener = () => {};\n\nconst toggle = async () => {\n\twidth.value = width.value === 180 ? 300 : 180;\n\tawait nextTick();\n};\n\nonMounted(() => {\n\tconst instance = Resize.of(box.value);\n\toffInstance = instance.on(() => {\n\t\toutput.value = { ...output.value, instanceCount: output.value.instanceCount + 1, width: box.value.offsetWidth };\n\t});\n\tstaticListener = () => {\n\t\toutput.value = { ...output.value, staticCount: output.value.staticCount + 1, width: box.value.offsetWidth };\n\t};\n\tResize.on(box.value, staticListener);\n});\n\nonBeforeUnmount(() => {\n\toffInstance();\n\tResize.off(box.value, staticListener);\n});\n</script>\n\n<template>\n\t<div class=\"demo\">\n\t\t<button @click=\"toggle\">切换宽度</button>\n\t\t<div ref=\"box\" class=\"box\" :style=\"{ width: `${width}px` }\">{{ width }}px</div>\n\t\t<strong>输出</strong>\n\t\t<pre>{{ JSON.stringify(output, null, 2) }}</pre>\n\t</div>\n</template>\n\n<style>\n.demo { display: grid; width: min(100%, 640px); gap: 12px; padding: 12px; box-sizing: border-box; font: 14px/1.5 sans-serif; }\nbutton { width: fit-content; padding: 6px 10px; cursor: pointer; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; }\n.box {\n\tmax-width: 100%;\n\tpadding: 18px;\n\tcolor: #1d4ed8;\n\tbackground: #dbeafe;\n\tborder-radius: 8px;\n\tbox-sizing: border-box;\n\ttransition: width 180ms ease;\n}\npre { margin: 0; padding: 12px; border-radius: 8px; background: #f8fafc; }\n</style>\n```\n:::\n","readmeFilename":"README.md"}