element-get-attribute补充自定义组件测试

pages/API/element-get-attribute/child.uvue

+<template>
+  <view class="child-view">
+    <text class="child-text">我是子组件child</text>
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {}
+    },
+  }
+</script>
+
+<style>
+  .child-view {
+    margin-top: 15px;
+    height: 100px;
+    background-color: dodgerblue;
+  }
+</style>

pages/API/element-get-attribute/element-get-attribute.test.js

@@ -20,15 +20,35 @@ describe('test element-get-attribute', () => {
     if(isWeb||isMP){
       await page.callMethod('getAttributeStyle')
       console.log('attrStyle:',await page.data('attrStyle'))
-      const attrStyle = isMP?'background-color:#FFF000;':'padding: 0.625rem; background-color: rgb(255, 240, 0);'
+      const attrStyle = isMP?'background-color:#FFF000;':'background-color: rgb(255, 240, 0);'
       expect(await page.data('attrStyle')).toEqual(attrStyle);
     }
   });
   it('check getPropertyValue', async () => {
     await page.callMethod('getPropertyValue')
+    await page.waitFor(1000)
     const propertyValue = isWeb?'rgb(255, 240, 0)':'#FFF000'
+    console.log('propertyValue: ',propertyValue,await page.data('propertyValue'));
     expect(await page.data('propertyValue')).toEqual(propertyValue);
   });
+
+  it('getBoundingClientRectSync', async () => {
+    await page.callMethod("getBoundingClientRectAsyncChild");
+    await page.waitFor(100)
+    const rectInfo = await page.data("rectInfo")
+    const systemInfo = await program.systemInfo();
+    const width = systemInfo.screenWidth
+    console.log('width: ',width);
+    console.log('rectInfo: ',rectInfo);
+    expect(Math.round(rectInfo.x)).toBe(15)
+    expect(Math.round(rectInfo.y) > 242).toBe(true)
+    expect(width - 15 * 2 - Math.round(rectInfo.width) >= 0).toBe(true)
+    expect(Math.round(rectInfo.height)).toBe(100)
+    expect(Math.round(rectInfo.left)).toBe(15)
+    expect(Math.round(rectInfo.top) > 242).toBe(true)
+    expect(width - 15 - Math.round(rectInfo.right) >= 0).toBe(true)
+    expect(Math.round(rectInfo.bottom) > 342).toBe(true)
+  })
   if(isApp||isMP){
     it('check scrollTo', async () => {
       await page.callMethod('scrollTo')

pages/API/element-get-attribute/element-get-attribute.uvue

 <template>
-  <view>
-    <view id="box" ref="box" style="padding: 20rpx;">
+  <view style="padding: 15px;">
+    <view id="box" ref="box">
       <text class="uni-title-text">元素的id：{{ attrId }}</text>
       <!-- #ifndef APP -->
       <text class="uni-title-text">元素的style：{{ attrStyle }}</text>
@@ -15,6 +15,43 @@
     <button @click="getAttributeStyle">getAttribute获取元素的style</button>
     <!-- #endif -->
     <button @click="getPropertyValue">getPropertyValue获取背景色值</button>
+
+    <child id="child" ref="child"></child>
+    <button @click="getBoundingClientRectAsyncChild">获取自定义组件child元素信息</button>
+    <view class="rect-info" v-if="rectInfo">
+      <view class="node-info-item">
+        <text class="node-info-item-k">x: </text>
+        <text class="node-info-item-v">{{rectInfo.x}}</text>
+      </view>
+      <view class="node-info-item">
+        <text class="node-info-item-k">y: </text>
+        <text class="node-info-item-v">{{rectInfo.y}}</text>
+      </view>
+      <view class="node-info-item">
+        <text class="node-info-item-k">width: </text>
+        <text class="node-info-item-v">{{rectInfo.width}}</text>
+      </view>
+      <view class="node-info-item">
+        <text class="node-info-item-k">height: </text>
+        <text class="node-info-item-v">{{rectInfo.height}}</text>
+      </view>
+      <view class="node-info-item">
+        <text class="node-info-item-k">left: </text>
+        <text class="node-info-item-v">{{rectInfo.left}}</text>
+      </view>
+      <view class="node-info-item">
+        <text class="node-info-item-k">top: </text>
+        <text class="node-info-item-v">{{rectInfo.top}}</text>
+      </view>
+      <view class="node-info-item">
+        <text class="node-info-item-k">right: </text>
+        <text class="node-info-item-v">{{rectInfo.right}}</text>
+      </view>
+      <view class="node-info-item">
+        <text class="node-info-item-k">bottom: </text>
+        <text class="node-info-item-v">{{rectInfo.bottom}}</text>
+      </view>
+    </view>
     <scroll-view ref="scrollView" class="scroll-view_H" direction="horizontal">
       <view class="scroll-view-item_H uni-bg-red"><text class="text">A</text></view>
       <view class="scroll-view-item_H uni-bg-green"><text class="text">B</text></view>
@@ -26,14 +63,38 @@
   </view>
 </template>
 <script lang="uts">
+  import child from './child.uvue'
+  type DomRectType = {
+    x : number,
+    y : number,
+    left : number,
+    top : number,
+    right : number,
+    bottom : number,
+    width : number,
+    height : number,
+  }
   export default {
+    components: {
+      child
+    },
     data() {
       return {
         boxTarget: null as null | UniElement,
         scrollViewTarget: null as null | UniElement,
         attrId: "",
         attrStyle:"",
-        propertyValue:""
+        propertyValue:"",
+        rectInfo: {
+          x: 0,
+          y: 0,
+          width: 0,
+          height: 0,
+          left: 0,
+          top: 0,
+          right: 0,
+          bottom: 0,
+        } as DomRectType,
       }
     },
     onReady() {
@@ -41,15 +102,21 @@
       this.scrollViewTarget = this.$refs['scrollView'] as UniElement;
     },
     methods: {
-      scrollTo() {
-        // #ifdef MP-WEIXIN
-        this.scrollViewTarget!.scrollTo({
-          left: 200
+      getBoundingClientRectAsyncChild(){
+        const childEl = uni.getElementById('child')!
+        childEl.getBoundingClientRectAsync()!.then((rect : DOMRect) => {
+          console.log('rect: ',rect);
+          this.rectInfo = {
+            x: rect.x,
+            y: rect.y,
+            width: rect.width,
+            height: rect.height,
+            left: rect.left,
+            top: rect.top,
+            right: rect.right,
+            bottom: rect.bottom,
+          } as DomRectType;;
         })
-        // #endif
-        // #ifndef MP-WEIXIN
-        this.scrollViewTarget!.scrollTo(200,0)
-        // #endif
       },
       getAttributeId() {
         this.attrId = this.boxTarget!.getAttribute('id') ?? ""
@@ -62,6 +129,16 @@
       },
       getAttributeStyle() {
         this.attrStyle = this.boxTarget!.getAttribute('style')?? ""
+      },
+      scrollTo() {
+        // #ifdef MP-WEIXIN
+        this.scrollViewTarget!.scrollTo({
+          left: 200
+        })
+        // #endif
+        // #ifndef MP-WEIXIN
+        this.scrollViewTarget!.scrollTo(200,0)
+        // #endif
       }
     }
   }
@@ -82,4 +159,24 @@
     font-size: 18px;
     color: #ffffff;
   }
+
+  .rect-info {
+    margin-top: 15px;
+    padding: 20rpx;
+    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>