onresize、ResizeObserver 监听浏览器宽高变化和元素宽高变化在Vue、react中使用

最新推荐文章于 2024-04-23 20:39:48 发布

hello，是翠花呀

最新推荐文章于 2024-04-23 20:39:48 发布

阅读量7.4k

点赞数 2

分类专栏： JavaScript进阶之路高级文章标签： resize resizeObserver

本文链接：https://blog.csdn.net/qq_26769677/article/details/101397275

版权

JavaScript进阶之路高级专栏收录该内容

15 篇文章 1 订阅

订阅专栏

onresize

onresize 事件会在窗口或框架被调整大小时发生。当需要对窗口大小变化做监听时，可以使用。例如我们需要在窗口大小改变的时候改变某个元素的宽高或者执行某个函数。

<body onresize="resizeFun()">

window.onresize = function() {
  // SomeJavaScriptCode
};

除了 body 标签，其他标签设置 onresize 属性并不起作用。

<p οnresize="resizeFun()"

window 还有个 resizeTo 方法用于把窗口大小调整为指定的宽度和高度：window.resizeTo(500,300)

ResizeObserver

Resize Observer API 提供了一种高性能方法可以监视元素的大小更改。相比于 Css 媒体查询的局限性和 window resize 的单一性 Observer API 够轻松观察并以高效的方式响应元素内容或边框的大小变化。

可以使用 ResizeObserver()构造函数创建一个新对象，然后使用 ResizeObserver.observe()它来寻找更改特定元素大小的对象。每当大小更改时，构造函数中设置的回调函数便会运行，从而提供对新维度的访问权限，并允许您根据需要执行任何操作。

ResizeObserver.disconnect()

取消观察 Element 特定观察者的所有观察目标。

ResizeObserver.observe()

启动对指定的观察 Element。

ResizeObserver.unobserve()

结束对指定的观察 Element。

例如，我们需要监听 A 元素的变化来改变 B 元素的宽度：

const resizeObserver = new ResizeObserver(entries => {
  this.BWidth = document.getElementById("A").clientWidth - 20;
});
resizeObserver.observe(document.getElementById("A"));

// 在不需要监听的时候或离开界面的时候销毁
resizeObserver.disconnect();

在 Vue 中使用示例：

const resizeObserver = new ResizeObserver(entries => {
  this.BWidth = document.body.clientWidth - 20;
});
resizeObserver.observe(document.body);
this.$once("hook:beforeDestroy", () => {
  resizeObserver.disconnect();
});

react中使用示例：

 async componentDidMount() {
    this.resizeObserver = new ResizeObserver(entries => {
       this.BWidth = document.body.clientWidth - 20;
    });
    this.resizeObserver.observe(document.body);
  }
  componentWillUnmount() {
    this.resizeObserver.disconnect();
  }

hello，是翠花呀

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
onresize、ResizeObserver 监听浏览器宽高变化和元素宽高变化在Vue、react中使用

onresizeonresize 事件会在窗口或框架被调整大小时发生。当需要对窗口大小变化做监听时，可以使用。例如我们需要在窗口大小改变的时候改变某个元素的宽高或者执行某个函数。<body onresize="resizeFun()">window.onresize = function() { // SomeJavaScriptCode};除了 body 标签，其...
复制链接

扫一扫