From bca57a74adac6d51eed2feddef4f45cffc069f34 Mon Sep 17 00:00:00 2001
From: hdx <hdx@dcloud.io>
Date: Mon, 18 Mar 2024 17:33:29 +0800
Subject: [PATCH] =?UTF-8?q?feat(nodes-info):=20=E8=A1=A5=E5=85=85=E5=AD=90?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=9A=84=20mounted=20=E7=94=9F=E5=91=BD?=
 =?UTF-8?q?=E5=91=A8=E6=9C=9F=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/API/nodes-info/nodes-info-child.uvue |  29 ++
 pages/API/nodes-info/nodes-info.test.js    |   5 +
 pages/API/nodes-info/nodes-info.uvue       | 354 +++++++++++----------
 3 files changed, 214 insertions(+), 174 deletions(-)
 create mode 100755 pages/API/nodes-info/nodes-info-child.uvue

diff --git a/pages/API/nodes-info/nodes-info-child.uvue b/pages/API/nodes-info/nodes-info-child.uvue
new file mode 100755
index 00000000..fad48b47
--- /dev/null
+++ b/pages/API/nodes-info/nodes-info-child.uvue
@@ -0,0 +1,29 @@
+<template>
+  <view class="selector-query-child-view">
+    <text class="selector-query-child-text">selector-query-child</text>
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        top: 0
+      }
+    },
+    mounted() {
+      uni.createSelectorQuery().in(this).select('.selector-query-child-view').boundingClientRect().exec((ret) => {
+        if (ret.length == 1) {
+          const nodeInfo = ret[0] as NodeInfo;
+          this.top = nodeInfo.top!
+        }
+      })
+    }
+  }
+</script>
+
+<style>
+  .selector-query-child-view {
+    margin-top: 15px;
+  }
+</style>
diff --git a/pages/API/nodes-info/nodes-info.test.js b/pages/API/nodes-info/nodes-info.test.js
index d219bfe0..e2c61f69 100644
--- a/pages/API/nodes-info/nodes-info.test.js
+++ b/pages/API/nodes-info/nodes-info.test.js
@@ -53,6 +53,11 @@ describe('nodes-info', () => {
     expect(nodeInfo2.top > 220).toBe(true)
     expect(Math.round(nodeInfo2.width)).toBe(RECT_WIDTH)
     expect(Math.round(nodeInfo2.height)).toBe(RECT_HEIGHT)
+  })
+  it('get-node-info-child', async () => {
+    const child = await page.$('.node-child')
+    const childData = await child.data()
+    expect(childData.top > 100).toBe(true)
   })
 
   // #ifdef APP
diff --git a/pages/API/nodes-info/nodes-info.uvue b/pages/API/nodes-info/nodes-info.uvue
index 47349d25..fef2a62b 100644
--- a/pages/API/nodes-info/nodes-info.uvue
+++ b/pages/API/nodes-info/nodes-info.uvue
@@ -1,176 +1,182 @@
-<template>
-  <view class="page" id="page">
-    <page-head :title="title"></page-head>
-    <button class="btn btn-get-node-info" @click="getNodeInfo">getNodeInfo</button>
-    <button class="btn btn-get-all-node-info" @click="getAllNodeInfo">getAllNodeInfo</button>
-    <view id="rect-1-2" class="rect-1-2">
-      <view class="rect rect1"></view>
-      <view class="rect rect2"></view>
-    </view>
-    <view class="rect-info-1-2">
-      <view class="rect-info" v-for="(nodeInfo, index) in nodeInfoList" :key="index">
-        <view class="node-info-item">
-          <text class="node-info-item-k">left: </text>
-          <text class="node-info-item-v">{{nodeInfo.left}}</text>
-        </view>
-        <view class="node-info-item">
-          <text class="node-info-item-k">top: </text>
-          <text class="node-info-item-v">{{nodeInfo.top}}</text>
-        </view>
-        <view class="node-info-item">
-          <text class="node-info-item-k">right: </text>
-          <text class="node-info-item-v">{{nodeInfo.right}}</text>
-        </view>
-        <view class="node-info-item">
-          <text class="node-info-item-k">bottom: </text>
-          <text class="node-info-item-v">{{nodeInfo.bottom}}</text>
-        </view>
-        <view class="node-info-item">
-          <text class="node-info-item-k">width: </text>
-          <text class="node-info-item-v">{{nodeInfo.width}}</text>
-        </view>
-        <view class="node-info-item">
-          <text class="node-info-item-k">height: </text>
-          <text class="node-info-item-v">{{nodeInfo.height}}</text>
-        </view>
+<template>
+  <view class="page" id="page">
+    <page-head :title="title"></page-head>
+    <button class="btn btn-get-node-info" @click="getNodeInfo">getNodeInfo</button>
+    <button class="btn btn-get-all-node-info" @click="getAllNodeInfo">getAllNodeInfo</button>
+    <view id="rect-1-2" class="rect-1-2">
+      <view class="rect rect1"></view>
+      <view class="rect rect2"></view>
+    </view>
+    <view class="rect-info-1-2">
+      <view class="rect-info" v-for="(nodeInfo, index) in nodeInfoList" :key="index">
+        <view class="node-info-item">
+          <text class="node-info-item-k">left: </text>
+          <text class="node-info-item-v">{{nodeInfo.left}}</text>
+        </view>
+        <view class="node-info-item">
+          <text class="node-info-item-k">top: </text>
+          <text class="node-info-item-v">{{nodeInfo.top}}</text>
+        </view>
+        <view class="node-info-item">
+          <text class="node-info-item-k">right: </text>
+          <text class="node-info-item-v">{{nodeInfo.right}}</text>
+        </view>
+        <view class="node-info-item">
+          <text class="node-info-item-k">bottom: </text>
+          <text class="node-info-item-v">{{nodeInfo.bottom}}</text>
+        </view>
+        <view class="node-info-item">
+          <text class="node-info-item-k">width: </text>
+          <text class="node-info-item-v">{{nodeInfo.width}}</text>
+        </view>
+        <view class="node-info-item">
+          <text class="node-info-item-k">height: </text>
+          <text class="node-info-item-v">{{nodeInfo.height}}</text>
+        </view>
       </view>
-    </view>
-  </view>
-</template>
-
-<script>
-  type NodeInfoType = {
-    left : number | null,
-    top : number | null,
-    right : number | null,
-    bottom : number | null,
-    width : number | null,
-    height : number | null,
-  }
-
-  export default {
-    data() {
-      return {
-        title: 'createSelectorQuery',
-        nodeInfoList: [] as NodeInfoType[],
-        // 仅用于自动化测试
-        rootNodeInfo: null as NodeInfoType | null,
-        //供自动化测试使用
-        // resizeRectValid: false
-      }
-    },
-    onResize() {
-      //供自动化测试使用
-      /* var rect12Element = uni.getElementById("rect-1-2")
-      if(rect12Element != null) {
-        var domRect = rect12Element.getBoundingClientRect()
-        if(domRect.width > 100) {
-          this.resizeRectValid = true
-        }
-      } */
-    },
-    methods: {
-      // 仅用于自动化测试
-      getRootNodeInfo(selector: string) {
-        uni.createSelectorQuery().select(selector).boundingClientRect().exec((ret) => {
-          if (ret.length == 1) {
-            const nodeInfo = ret[0] as NodeInfo;
-            const nodeType = {
-              left: nodeInfo.left,
-              top: nodeInfo.top,
-              right: nodeInfo.right,
-              bottom: nodeInfo.bottom,
-              width: nodeInfo.width,
-              height: nodeInfo.height,
-            } as NodeInfoType;
-            this.rootNodeInfo = nodeType
-          }
-        })
-      },
-      getNodeInfo() {
-        uni.createSelectorQuery().select('.rect1').boundingClientRect().exec((ret) => {
-          this.nodeInfoList.length = 0
-          const i = ret[0] as NodeInfo
-          this.nodeInfoList.push({
-            left: i.left,
-            top: i.top,
-            right: i.right,
-            bottom: i.bottom,
-            width: i.width,
-            height: i.height,
-          } as NodeInfoType)
-        })
-      },
-      getAllNodeInfo() {
-        uni.createSelectorQuery().selectAll('.rect').boundingClientRect().exec((ret) => {
-          this.nodeInfoList.length = 0
-          const array = ret[0] as NodeInfo[]
-          array.forEach((i) => {
-            this.nodeInfoList.push({
-              left: i.left,
-              top: i.top,
-              right: i.right,
-              bottom: i.bottom,
-              width: i.width,
-              height: i.height,
-            } as NodeInfoType)
-          })
-        })
-      }
-    }
-  }
-</script>
-
-<style>
-  .page {
-    padding: 15px;
-    flex: 1;
-  }
-
-  .btn {
-    margin-top: 15px;
-  }
-
-  .rect-1-2 {
-    flex-direction: row;
-    margin-top: 15px;
-  }
-
-  .rect {
-    width: 150px;
-    height: 100px;
-  }
-
-  .rect1 {
-    background-color: dodgerblue;
-  }
-
-  .rect2 {
-    margin-left: auto;
-    background-color: seagreen;
-  }
-
-  .rect-info-1-2 {
-    flex-direction: row;
-    margin-top: 15px;
-  }
-
-  .rect-info {
-    flex: 1;
-    flex-direction: column;
-  }
-
-  .node-info-item {
-    flex-direction: row;
-  }
-
-  .node-info-item-k {
-    width: 72px;
-    line-height: 2;
-  }
-
-  .node-info-item-v {
-    font-weight: bold;
-    line-height: 2;
-  }
+      <node-child class="node-child"></node-child>
+    </view>
+  </view>
+</template>
+
+<script>
+  import nodeChild from './nodes-info-child.uvue'
+
+  type NodeInfoType = {
+    left : number | null,
+    top : number | null,
+    right : number | null,
+    bottom : number | null,
+    width : number | null,
+    height : number | null,
+  }
+
+  export default {
+    components: {
+      nodeChild
+    },
+    data() {
+      return {
+        title: 'createSelectorQuery',
+        nodeInfoList: [] as NodeInfoType[],
+        // 仅用于自动化测试
+        rootNodeInfo: null as NodeInfoType | null,
+        //供自动化测试使用
+        // resizeRectValid: false
+      }
+    },
+    onResize() {
+      //供自动化测试使用
+      /* var rect12Element = uni.getElementById("rect-1-2")
+      if(rect12Element != null) {
+        var domRect = rect12Element.getBoundingClientRect()
+        if(domRect.width > 100) {
+          this.resizeRectValid = true
+        }
+      } */
+    },
+    methods: {
+      // 仅用于自动化测试
+      getRootNodeInfo(selector : string) {
+        uni.createSelectorQuery().select(selector).boundingClientRect().exec((ret) => {
+          if (ret.length == 1) {
+            const nodeInfo = ret[0] as NodeInfo;
+            const nodeType = {
+              left: nodeInfo.left,
+              top: nodeInfo.top,
+              right: nodeInfo.right,
+              bottom: nodeInfo.bottom,
+              width: nodeInfo.width,
+              height: nodeInfo.height,
+            } as NodeInfoType;
+            this.rootNodeInfo = nodeType
+          }
+        })
+      },
+      getNodeInfo() {
+        uni.createSelectorQuery().select('.rect1').boundingClientRect().exec((ret) => {
+          this.nodeInfoList.length = 0
+          const i = ret[0] as NodeInfo
+          this.nodeInfoList.push({
+            left: i.left,
+            top: i.top,
+            right: i.right,
+            bottom: i.bottom,
+            width: i.width,
+            height: i.height,
+          } as NodeInfoType)
+        })
+      },
+      getAllNodeInfo() {
+        uni.createSelectorQuery().selectAll('.rect').boundingClientRect().exec((ret) => {
+          this.nodeInfoList.length = 0
+          const array = ret[0] as NodeInfo[]
+          array.forEach((i) => {
+            this.nodeInfoList.push({
+              left: i.left,
+              top: i.top,
+              right: i.right,
+              bottom: i.bottom,
+              width: i.width,
+              height: i.height,
+            } as NodeInfoType)
+          })
+        })
+      }
+    }
+  }
+</script>
+
+<style>
+  .page {
+    padding: 15px;
+    flex: 1;
+  }
+
+  .btn {
+    margin-top: 15px;
+  }
+
+  .rect-1-2 {
+    flex-direction: row;
+    margin-top: 15px;
+  }
+
+  .rect {
+    width: 150px;
+    height: 100px;
+  }
+
+  .rect1 {
+    background-color: dodgerblue;
+  }
+
+  .rect2 {
+    margin-left: auto;
+    background-color: seagreen;
+  }
+
+  .rect-info-1-2 {
+    flex-direction: row;
+    margin-top: 15px;
+  }
+
+  .rect-info {
+    flex: 1;
+    flex-direction: column;
+  }
+
+  .node-info-item {
+    flex-direction: row;
+  }
+
+  .node-info-item-k {
+    width: 72px;
+    line-height: 2;
+  }
+
+  .node-info-item-v {
+    font-weight: bold;
+    line-height: 2;
+  }
 </style>
-- 
GitLab