探讨UniApp如何设置组件的宽度

<template>
  <view class="container">
    <view class="box" style="width:200rpx;height:200rpx;"></view>
  </view>
</template>

<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .box {
    background-color: red;
  }
</style>

<template>
  <view class="container">
    <view class="content" :style="'width:' + width + ';height:200rpx;'">
      <text class="text">{{content}}</text>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        content: '这是一段很长的文本，我们需要让组件自适应宽度。',
        width: ''
      }
    },
    mounted() {
      let query = uni.createSelectorQuery().in(this);
      query.select('.text').boundinGClientRect((res) => {
        // 获取text组件的宽度，并设置content的宽度
        this.width = res.width + 'px'
      }).exec();
    }
  }
</script>

<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .content {
    background-color: gray;
    padding: 10rpx;
  }
</style>