{"id":15156282,"url":"https://github.com/en777/vue-element-size","last_synced_at":"2026-01-20T13:01:41.319Z","repository":{"id":191958700,"uuid":"686052195","full_name":"En777/vue-element-size","owner":"En777","description":"Get element/dom/node size for Vue.js","archived":false,"fork":false,"pushed_at":"2023-09-02T04:06:11.000Z","size":10,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-09T18:44:32.805Z","etag":null,"topics":["resizeobserver","vue","vue-get-element-size","vue-resize","vue-resize-observer","vuejs2"],"latest_commit_sha":null,"homepage":"https://en777.github.io/vue-element-size/example/","language":"HTML","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/En777.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-01T16:13:05.000Z","updated_at":"2023-09-02T03:52:48.000Z","dependencies_parsed_at":"2024-11-02T22:41:24.656Z","dependency_job_id":"74576f1d-389d-477e-a3fc-a7437f3f9bae","html_url":"https://github.com/En777/vue-element-size","commit_stats":{"total_commits":5,"total_committers":1,"mean_commits":5.0,"dds":0.0,"last_synced_commit":"2f32769fac19841ef75b76cec0ed1827c0e578df"},"previous_names":["en777/vue-element-size"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/En777/vue-element-size","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/En777%2Fvue-element-size","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/En777%2Fvue-element-size/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/En777%2Fvue-element-size/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/En777%2Fvue-element-size/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/En777","download_url":"https://codeload.github.com/En777/vue-element-size/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/En777%2Fvue-element-size/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28603404,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T12:01:53.233Z","status":"ssl_error","status_checked_at":"2026-01-20T12:01:46.545Z","response_time":117,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["resizeobserver","vue","vue-get-element-size","vue-resize","vue-resize-observer","vuejs2"],"created_at":"2024-09-26T19:03:14.299Z","updated_at":"2026-01-20T13:01:41.293Z","avatar_url":"https://github.com/En777.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-element-size\n\nv-size=\"onResize\" get element size/width/height for Vue.js development.\n\n[Demo \u0026 Usage](https://en777.github.io/vue-element-size/example/)\n\n```\n// usage\n// npm install vue-element-size\ndirectives: {\n  size: require('vue-element-size')\n}\n\n\u003cdiv v-size:width=\"(size) =\u003e $refs.fixedBox.style.width = size.width + 'px'\"\u003e\n  // ...\n\u003c/div\u003e\n\n\u003cdiv v-size=\"onResize\"\u003e\n  // ...\n\u003c/div\u003e\nonResize arguments: ResizeObserverEntry https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry\n\n```\n\n当一个 fixed 定位的元素A在页面中，如果你希望A不要超过页面中某个容器的宽度、高度，那么这个组件就能解决你的问题。\n\n特点：\n\n使用方法非常简单  \n元素不改变尺寸的时候，也能得到宽高尺寸的回调数据  \nresize改变尺寸的时候，可获取到dom节点的宽高等信息  \n基于 ResizeObserver 实现的dom尺寸变更检测，兼容性：chrome \u003e= v64  \n不仅仅获取元素宽高，还有详细信息  \n```\ncontentRect:\n  bottom: 250\n  height: 250\n  left: 0\n  right: 878\n  top: 0\n  width: 878\n  x: 0\n  y: 0\n\nResizeObserverEntry\n  borderBoxSize: [ResizeObserverSize]\n  contentBoxSize: [ResizeObserverSize]\n  contentRect: {x: 0, y: 0, width: 0, height: 0, top: 0, …}\n  devicePixelContentBoxSize: [ResizeObserverSize]\n  target: element\n```\n\n![npm](https://img.shields.io/npm/v/vue-element-size)\n[![gzip size](http://img.badgesize.io/https://unpkg.com/vue-element-size/vvue-element-size.js?compression=gzip\u0026label=gzip%20size\u0026style=flat-square)](https://unpkg.com/vue-element-size/vvue-element-size.js)\n[![downloads](https://img.shields.io/npm/dm/vue-element-size.svg?style=flat-square)](https://www.npmtrends.com/vue-element-size)\n[![MIT License](https://img.shields.io/npm/l/vue-element-size.svg?style=flat-square)](https://github.com/fisker/vue-element-size/blob/master/license)\n[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/vue-element-size/badge)](https://www.jsdelivr.com/package/npm/vue-element-size)\n\n```\nvue-element-size.js\n  NPM install:\n    npm install vue-element-size\n    var VueElementSize = require('vue-element-size');\n\n  CDN:\n    https://cdn.jsdelivr.net/npm/vue-element-size@0.0.2/vue-element-size.js\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fen777%2Fvue-element-size","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fen777%2Fvue-element-size","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fen777%2Fvue-element-size/lists"}