From 716fcaa88918297aa6396f47062467be7dfad78b Mon Sep 17 00:00:00 2001
From: shutao <shutao@dcloud.io>
Date: Wed, 17 Apr 2024 12:44:04 +0800
Subject: [PATCH] =?UTF-8?q?resize-observer.uvue=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E9=9A=90=E8=97=8Fbox=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/API/resize-observer/resize-observer.uvue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/pages/API/resize-observer/resize-observer.uvue b/pages/API/resize-observer/resize-observer.uvue
index 14b258a3..47344fa3 100644
--- a/pages/API/resize-observer/resize-observer.uvue
+++ b/pages/API/resize-observer/resize-observer.uvue
@@ -1,12 +1,13 @@
 <template>
 	<view>
 		<text>点击蓝色或红色方块区域会修改元素宽高</text>
-		<view style="align-items: center; justify-content: center; margin: 10px;">
+		<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="revertBoxSize">还原修改前元素宽高</button>
+		<button @click="toggleDisplay">{{boxDisplay? '隐藏元素': '显示元素'}}</button>
 		<view>
 			<text class="info-text">蓝色方块元素:</text>
 			<view class="info-item">
@@ -26,7 +27,8 @@
 			return {
 				outBoxSizeInfo: "",
 				innerBoxSizeInfo: "",
-				offset: 2,
+				offset: 2,
+				boxDisplay: true,
 				outBoxElement: null as UniElement | null,
 				innerBoxElement: null as UniElement | null,
 			}
@@ -64,6 +66,9 @@
 					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]
-- 
GitLab