@clownjs/size-observer

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.