ResizeObserver+grid 实现响应式布局

讨口子

已于 2022-09-29 09:29:53 修改

阅读量248

点赞数 1

CC 4.0 BY-SA版权

分类专栏：笔记文章标签：前端 javascript css

于 2022-09-22 10:31:19 首次发布

本文链接：https://blog.csdn.net/qq_37034928/article/details/126987137

ResizeObserver 实现响应式布局
// css
grid

new ResizeObserver()和window.addEventListener('resize',()=>{})差不多
后者是对整个屏幕监听，前者只对单个元素监听

<template>
    <div class="safety">
    	<div class="safety-item safety-item-client" ref="client"></div>
    	<!--需要被监听的元素-->
    	<div class="safety-item safety-item-backstage" ref="backstage"></div>
    	<div class="safety-item safety-item-dataex" ref="dataex"></div>
    </div>
 </template>

mounted() {
   this.resizeObserver = new ResizeObserver(() => {
        // 元素尺寸改变需要执行的操作
    })
    this.resizeObserver.observe(this.$refs.backstage);
},
destroyed(){
	// 注销
 	this.resizeObserver.disconnect()
}