From 2ac68d907db720011fcb391544da1eff7a23561e Mon Sep 17 00:00:00 2001
From: shutao <shutao@dcloud.io>
Date: Mon, 15 Apr 2024 18:55:25 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20resize-observer=20?=
 =?UTF-8?q?=E7=9B=91=E5=90=AC=E5=85=83=E7=B4=A0=E5=A4=A7=E5=B0=8F=E5=8F=98?=
 =?UTF-8?q?=E5=8C=96=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                    | 11 ++-
 .../resize-observer/resize-observer.test.js   | 20 +++++
 .../API/resize-observer/resize-observer.uvue  | 88 +++++++++++++++++++
 pages/tabBar/API.uvue                         |  6 ++
 4 files changed, 124 insertions(+), 1 deletion(-)
 create mode 100644 pages/API/resize-observer/resize-observer.test.js
 create mode 100644 pages/API/resize-observer/resize-observer.uvue

diff --git a/pages.json b/pages.json
index 8a9093ee..d7807b92 100644
--- a/pages.json
+++ b/pages.json
@@ -1279,7 +1279,16 @@
         "navigationBarTitleText" : "",
         "backgroundColorContent": "#fffae8"
       }
-    }
+    },
+    // #endif
+    // #ifdef APP-ANDROID
+    {
+      "path" : "pages/API/resize-observer/resize-observer",
+      "style" :
+      {
+        "navigationBarTitleText" : "resize0bserver"
+      }
+    },
     // #endif
   ],
   "globalStyle": {
diff --git a/pages/API/resize-observer/resize-observer.test.js b/pages/API/resize-observer/resize-observer.test.js
new file mode 100644
index 00000000..eee1bcdc
--- /dev/null
+++ b/pages/API/resize-observer/resize-observer.test.js
@@ -0,0 +1,20 @@
+describe('api-resize-observer', () => {
+  if (!process.env.uniTestPlatformInfo.startsWith('android')) {
+    it('dummyTest', async () => {
+      expect(1).toBe(1)
+    })
+    return
+  }
+
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch('/pages/API/resize-observer/resize-observer')
+    await page.waitFor('button')
+  })
+
+  it('check_resize-observer', async () => {
+    await page.waitFor(600)
+    const image = await program.screenshot();
+    expect(image).toSaveImageSnapshot();
+  })
+})
diff --git a/pages/API/resize-observer/resize-observer.uvue b/pages/API/resize-observer/resize-observer.uvue
new file mode 100644
index 00000000..14b258a3
--- /dev/null
+++ b/pages/API/resize-observer/resize-observer.uvue
@@ -0,0 +1,88 @@
+<template>
+	<view>
+		<text>点击蓝色或红色方块区域会修改元素宽高</text>
+		<view 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>
+		<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,
+				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")
+				}
+			},
+			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>
diff --git a/pages/tabBar/API.uvue b/pages/tabBar/API.uvue
index dc5a9c35..f550acb3 100644
--- a/pages/tabBar/API.uvue
+++ b/pages/tabBar/API.uvue
@@ -160,6 +160,12 @@
                 api: ["Element.takeSnapshot"]
               },
               // #endif
+              // #ifdef APP-ANDROID
+              {
+                name: 'element大小变化监听',
+                url: 'resize-observer'
+              },
+              // #endif
               {
                 name: 'node节点',
                 url: 'nodes-info',
-- 
GitLab