MDUI文档English简体中文亮色模式暗色模式跟随系统
预设颜色
自选颜色
从壁纸提取颜色
请选择一张壁纸
开发指南
样式
与框架集成
组件
工具函数
jq 工具库 dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
独立包

observeResize

observeResize 函数用于监听元素尺寸的变化,当尺寸发生变化时,会执行指定的回调函数。该函数使用 ResizeObserver 实现,但采用了单例模式,因此性能更优。

使用方法

按需导入函数:

import { observeResize } from 'mdui/functions/observeResize.js';

使用示例:

// 监听 document.body 的尺寸变化
const observer = observeResize(document.body, function(entry, observer) {
  // 此时 document.body 的尺寸发生了变化,可通过 entry 获取新的尺寸
  console.log(entry);

  // 可调用该方法取消监听
  observer.unobserve();
});

// 也可以调用函数返回值的 unobserve 方法取消监听
observer.unobserve();

API

observeResize(target: string | HTMLElement | JQ<HTMLElement>, callback: Callback)): ObserveResize

target 参数可以是 CSS 选择器、DOM 元素、或 JQ 对象

Callback

(entry: ResizeObserverEntry, observer: ObserveResize) => void

在回调函数中,this 指向 ObserveResize

ObserveResize

{
  unobserve: () => void;
}
本页目录