https://github.com/en777/vue-element-size

Get element/dom/node size for Vue.js
https://github.com/en777/vue-element-size

resizeobserver vue vue-get-element-size vue-resize vue-resize-observer vuejs2

Last synced: 4 days ago
JSON representation

Get element/dom/node size for Vue.js

• Host: GitHub
• URL: https://github.com/en777/vue-element-size
• Owner: En777
• Created: 2023-09-01T16:13:05.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-09-02T04:06:11.000Z (about 1 year ago)
• Last Synced: 2024-10-17T11:56:56.350Z (20 days ago)
• Topics: resizeobserver, vue, vue-get-element-size, vue-resize, vue-resize-observer, vuejs2
• Language: HTML
• Homepage: https://en777.github.io/vue-element-size/example/
• Size: 9.77 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# vue-element-size

v-size="onResize" get element size/width/height for Vue.js development.

[Demo & Usage](https://en777.github.io/vue-element-size/example/)

```

// usage

// npm install vue-element-size

directives: {

  size: require('vue-element-size')

}



  // ...





  // ...



onResize arguments: ResizeObserverEntry https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry


```

当一个 fixed 定位的元素A在页面中，如果你希望A不要超过页面中某个容器的宽度、高度，那么这个组件就能解决你的问题。

特点：

使用方法非常简单  

元素不改变尺寸的时候，也能得到宽高尺寸的回调数据  

resize改变尺寸的时候，可获取到dom节点的宽高等信息  

基于 ResizeObserver 实现的dom尺寸变更检测，兼容性：chrome >= v64  

不仅仅获取元素宽高，还有详细信息  

```

contentRect:

  bottom: 250

  height: 250

  left: 0

  right: 878

  top: 0

  width: 878

  x: 0

  y: 0

ResizeObserverEntry

  borderBoxSize: [ResizeObserverSize]

  contentBoxSize: [ResizeObserverSize]

  contentRect: {x: 0, y: 0, width: 0, height: 0, top: 0, …}

  devicePixelContentBoxSize: [ResizeObserverSize]

  target: element

```

![npm](https://img.shields.io/npm/v/vue-element-size)

[![gzip size](http://img.badgesize.io/https://unpkg.com/vue-element-size/vvue-element-size.js?compression=gzip&label=gzip%20size&style=flat-square)](https://unpkg.com/vue-element-size/vvue-element-size.js)

[![downloads](https://img.shields.io/npm/dm/vue-element-size.svg?style=flat-square)](https://www.npmtrends.com/vue-element-size)

[![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)

[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/vue-element-size/badge)](https://www.jsdelivr.com/package/npm/vue-element-size)

```

vue-element-size.js

  NPM install:

    npm install vue-element-size

    var VueElementSize = require('vue-element-size');

  CDN:

    https://cdn.jsdelivr.net/npm/[email protected]/vue-element-size.js

```