resize-observer.uvue

<template>
	<view>
		<text>点击蓝色或红色方块区域会修改元素宽高</text>
		<view v-show="boxDisplay" style="align-items: center; justify-content: center; margin: 10px;">
			<view style="width: 140px; height: 140px; background-color: blue; align-items: center; justify-content: center; padding: 5px;" id="outBox" @click="outBoxClick">
				<view style="width: 80px; height: 80px; background-color: red; padding: 5px;" id="innerBox" @click="innerBoxClick"></view>
			</view>
		</view>
		<button @click="revertBoxSize">还原修改前元素宽高</button>
		<button @click="toggleDisplay">{{boxDisplay? '隐藏元素': '显示元素'}}</button>
		<view>
			<text class="info-text">蓝色方块元素:</text>
			<view class="info-item">
			  <text class="info-text">{{outBoxSizeInfo}}</text>
			</view>
			<text class="info-text" style="margin-top: 20px;">红色方块元素:</text>
			<view class="info-item">
			  <text class="info-text">{{innerBoxSizeInfo}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				outBoxSizeInfo: "",
				innerBoxSizeInfo: "",
				offset: 2,
				boxDisplay: true,
				outBoxElement: null as UniElement | null,
				innerBoxElement: null as UniElement | null,
			}
		},
		onShow() {
			const resizeObserver = new UniResizeObserver((entries: Array<UniResizeObserverEntry>) => {
				entries.forEach(entry =>{
					if(entry.target == this.outBoxElement) {
						this.outBoxSizeInfo = this.analysisResizeObserverEntry(entry)
					} else if(entry.target == this.innerBoxElement) {
						this.innerBoxSizeInfo = this.analysisResizeObserverEntry(entry)
					}
				})
			})
			this.outBoxElement = uni.getElementById("outBox")
			resizeObserver.observe(this.outBoxElement)
			this.innerBoxElement = uni.getElementById("innerBox")
			resizeObserver.observe(this.innerBoxElement)
		},
		methods: {
			innerBoxClick() {
				this.innerBoxElement!.style.setProperty("width", this.innerBoxElement!.offsetWidth+this.offset)
				this.innerBoxElement!.style.setProperty("height", this.innerBoxElement!.offsetWidth+this.offset)
			},
			outBoxClick() {
				this.outBoxElement!.style.setProperty("width", this.outBoxElement!.offsetWidth+this.offset)
				this.outBoxElement!.style.setProperty("height", this.outBoxElement!.offsetWidth+this.offset)
			},
			revertBoxSize() {
				if(this.outBoxElement != null) {
					this.outBoxElement!.style.setProperty("width", "140px")
					this.outBoxElement!.style.setProperty("height", "140px")
				}
				if(this.innerBoxElement != null) {
					this.innerBoxElement!.style.setProperty("width", "80px")
					this.innerBoxElement!.style.setProperty("height", "80px")
				}
			},
			toggleDisplay() {
				this.boxDisplay = !this.boxDisplay
			},
			analysisResizeObserverEntry(entry: UniResizeObserverEntry): string {
				const contentBoxSize = entry.contentBoxSize[0]
				const borderBoxSize = entry.borderBoxSize[0]
				const devicePixelContentBoxSize = entry.devicePixelContentBoxSize[0]
				return "borderBoxSize: \n{blockSize:"+borderBoxSize.blockSize+", inlineSize:"+borderBoxSize.inlineSize+"}\n"+
					   "contentBoxSize: \n{blockSize:"+contentBoxSize.blockSize+", inlineSize:"+contentBoxSize.inlineSize+"}\n"+
					   "devicePixelContentBoxSize: \n{blockSize:"+devicePixelContentBoxSize.blockSize+", inlineSize:"+devicePixelContentBoxSize.inlineSize+"}\n"+
					   "contentRect: \n{x:"+entry.contentRect.x+", y:"+entry.contentRect.y+", width:"+entry.contentRect.width+", height:"+entry.contentRect.height+"}"
			}
		}
	}
</script>

<style>
 .info-item {
    flex-direction: row;
  }
  .info-text {
	  font-size: 14px;
  }
</style>