nodes-info.uvue

<template>
  <view class="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 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[],
      }
    },
    methods: {
      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;
  }

  .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>