Size Observer

监听元素尺寸变化插件

特性

1. 当盒子大小改变时会触发回调函数
2. 基于JS试验API：ResizeObserver
3. 基于resize-observer-polyfill
4. 封装了vue指令的形式

原生使用

import SizeObserver from '@clownjs/size-observer'
const resizeObserve = new SizeObserver({ 
  el: '#resize', // Selector or Dom
  options: {
    // Your Options
    // 参考下方说明
  }
});
document.querySelector('#resize').addEventListener('sizechange', (e) => {
  // 盒子触发回调，回调参数参考下方说明
  const { contentRect } = e
})
resizeObserve.init();

• UMD CDN: https://unpkg.com/@clownjs/size-observer/dist/index.umd.js
• UMD Name: HowdySizeObserver
• UMD Example: Click Here

Options (Objcet)

|参数|说明|类型|可选值|默认值| |:---|:---|:---|:---|:---| |wait|节流延迟(ms)|Number|-|0| |immediate|是否立即先执行一遍回调|Boolean|-|true|

Event

• 初始化后，会自动加入一个sizechange的自定义事件监听, 可以在回调中获取到盒子大小变化后的属性。

回调函数中提供以下参数

|参数|说明|类型| |:---|:---|:---| |contentRect|Dom大小改变后的位置信息|Object|

ContentRect Types

interface DOMRectReadOnly {
  readonly x: number;
  readonly y: number;
  readonly width: number;
  readonly height: number;
  readonly top: number;
  readonly right: number;
  readonly bottom: number;
  readonly left: number;
}

以Vue指令方式使用

import { SizeObserverDirective } from '@clownjs/size-observer'
// Vue3全局引入
app.use(SizeObserverDirective)

// Vue2全局引入(对vue2做了兼容)
Vue.use(SizeObserverDirective)

// 组件内引入
export default {
  directive: {
    SizeObserver: SizeObserverDirective
  }
}

其余Vue指令使用方式可参考Example.