update resize-observer.uvue

059605c2 · shutao-dc · a7fe3f6c · 059605c2
隐藏空白更改
内联并排

Showing with 111 addition and 90 deletion

pages/API/resize-observer/resize-observer.uvue pages/API/resize-observer/resize-observer.uvue +111 -90

未找到文件。
--- a/pages/API/resize-observer/resize-observer.uvue
+++ b/pages/API/resize-observer/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;
+<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,
+        resizeObserver: null as UniResizeObserver | null
+      }
+    },
+    onBackPress() : boolean {
+      if (this.resizeObserver != null) {
+        this.resizeObserver!.disconnect()
+      }
+      return false
+    },
+    onShow() {
+      if (this.resizeObserver == null) {
+        this.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")
+        if (this.outBoxElement != null) {
+          this.resizeObserver!.observe(this.outBoxElement)
+        }
+        this.innerBoxElement = uni.getElementById("innerBox")
+        if (this.innerBoxElement != null) {
+          this.resizeObserver!.observe(this.innerBoxElement)
+        }
+      }
+    },
+    methods: {
+      innerBoxClick() {
+        if (this.innerBoxElement != null) {
+          this.innerBoxElement!.style.setProperty("width", this.innerBoxElement!.offsetWidth + this.offset)
+          this.innerBoxElement!.style.setProperty("height", this.innerBoxElement!.offsetWidth + this.offset)
+        }
+      },
+      outBoxClick() {
+        if (this.outBoxElement != null) {
+          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;
-  }
+    font-size: 14px;
+  }
 </style>