From a4741c42890a782ad078529371d5142ab5739872 Mon Sep 17 00:00:00 2001
From: hdx <hdx@dcloud.io>
Date: Tue, 12 Sep 2023 16:01:23 +0800
Subject: [PATCH] =?UTF-8?q?notes-info:=20=E8=A1=A5=E5=85=85=20selectAll=20?=
 =?UTF-8?q?=E7=A4=BA=E4=BE=8B=EF=BC=8C=E5=A2=9E=E5=8A=A0=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E5=8C=96=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.test.js |  42 +++++++++
 pages/API/nodes-info/nodes-info.uvue    | 110 +++++++++++++++---------
 2 files changed, 112 insertions(+), 40 deletions(-)
 create mode 100644 pages/API/nodes-info/nodes-info.test.js

diff --git a/pages/API/nodes-info/nodes-info.test.js b/pages/API/nodes-info/nodes-info.test.js
new file mode 100644
index 00000000..fa778b21
--- /dev/null
+++ b/pages/API/nodes-info/nodes-info.test.js
@@ -0,0 +1,42 @@
+const PAGE_PATH = '/pages/API/nodes-info/nodes-info'
+
+describe('nodes-info', () => {
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor(500)
+  })
+  it('get-node-info', async () => {
+    const btnGetNodeInfo = await page.$('.btn-get-node-info')
+
+    await btnGetNodeInfo.tap()
+    await page.waitFor(50)
+
+    const data = await page.data()
+    const nodeInfo = data.nodeInfoList[0]
+
+    expect(nodeInfo.left > 15).toBe(true)
+    expect(nodeInfo.width == 150).toBe(true)
+    expect(nodeInfo.height == 100).toBe(true)
+  })
+  it('get-all-node-info', async () => {
+    const btnGetAllNodeInfo = await page.$('.btn-get-all-node-info')
+
+    await btnGetAllNodeInfo.tap()
+    await page.waitFor(50)
+
+    const data = await page.data()
+
+    const nodeInfo1 = data.nodeInfoList[0]
+    expect(nodeInfo1.left > 15).toBe(true)
+    expect(nodeInfo1.top > 220).toBe(true)
+    expect(nodeInfo1.width == 150).toBe(true)
+    expect(nodeInfo1.height == 100).toBe(true)
+
+    const nodeInfo2 = data.nodeInfoList[1]
+    expect(nodeInfo2.left > 200).toBe(true)
+    expect(nodeInfo2.top > 220).toBe(true)
+    expect(nodeInfo2.width == 150).toBe(true)
+    expect(nodeInfo2.height == 100).toBe(true)
+  })
+})
\ No newline at end of file
diff --git a/pages/API/nodes-info/nodes-info.uvue b/pages/API/nodes-info/nodes-info.uvue
index 1f355a58..b0df9542 100644
--- a/pages/API/nodes-info/nodes-info.uvue
+++ b/pages/API/nodes-info/nodes-info.uvue
@@ -1,34 +1,38 @@
 <template>
-  <view>
+  <view class="uni-padding-wrap">
     <page-head :title="title"></page-head>
-    <view class="uni-padding-wrap uni-common-mt">
-      <button @click="getNodeInfo">getNodeInfo</button>
+    <button class="btn btn-get-node-info" @click="getNodeInfo">getNodeInfo</button>
+    <button class="btn btn-get-all-node-info" @click="getAllNodeInfo">getAllNodeInfo</button>
+    <view class="rect-1-2">
+      <view class="rect rect1"></view>
+      <view class="rect rect2"></view>
     </view>
-    <view class="rect" :style="{left: left, width: width, height: height}"></view>
-    <view class="rect-info">
-      <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 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>
@@ -39,16 +43,20 @@
     data() {
       return {
         title: 'createSelectorQuery',
-        nodeInfo: { left: 0, top: 0, right: 0, bottom: 0, width: 0, height: 0 } as NodeInfo,
-        left: 16,
-        width: 150,
-        height: 100,
+        nodeInfoList: [] as NodeInfo[],
       }
     },
     methods: {
       getNodeInfo() {
-        uni.createSelectorQuery().select('.rect').boundingClientRect().exec((ret) => {
-          this.nodeInfo = ret[0] as NodeInfo
+        uni.createSelectorQuery().select('.rect1').boundingClientRect().exec((ret) => {
+          this.nodeInfoList.length = 0
+          this.nodeInfoList.push(ret[0] as NodeInfo)
+        })
+      },
+      getAllNodeInfo() {
+        uni.createSelectorQuery().selectAll('.rect').boundingClientRect().exec((ret) => {
+          this.nodeInfoList.length = 0
+          this.nodeInfoList.push(...(ret[0] as NodeInfo[]))
         })
       }
     }
@@ -56,15 +64,37 @@
 </script>
 
 <style>
+  .btn {
+    margin-top: 15px;
+  }
+
+  .rect-1-2 {
+    flex-direction: row;
+    margin-top: 15px;
+  }
+
   .rect {
+    width: 150px;
+    height: 100px;
+  }
+
+  .rect1 {
     background-color: dodgerblue;
-    margin-top: 50px;
+  }
+
+  .rect2 {
+    margin-left: auto;
+    background-color: seagreen;
+  }
+
+  .rect-info-1-2 {
+    flex-direction: row;
+    margin-top: 15px;
   }
 
   .rect-info {
-    display: flex;
+    flex: 1;
     flex-direction: column;
-    padding: 15px;
   }
 
   .node-info-item {
@@ -72,12 +102,12 @@
   }
 
   .node-info-item-k {
-    width: 100px;
-    line-height: 24px;
+    width: 72px;
+    line-height: 2;
   }
 
   .node-info-item-v {
     font-weight: bold;
-    line-height: 24px;
+    line-height: 2;
   }
 </style>
-- 
GitLab