文字超出一行显示展开按钮，点击展开全部显示，点击收起只显示一行

<template>
  <view>
    <text class="content" :class="{ 'expand': isExpanded }">{{ content }}</text>
    <view v-if="showExpandButton" class="expand-button" @tap="toggleExpand">
      {{ isExpanded ? '收起' : '展开' }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      content: '这里是你的文字内容，可以是很长的一段文字...',
      isExpanded: false,
      showExpandButton: false,
    };
  },
  mounted() {
    // 在 mounted 钩子中计算文字是否超过一行，从而决定是否显示展开按钮
    this.$nextTick(() => {
      const query = uni.createSelectorQuery().in(this);
      query
        .select('.content')
        .boundingClientRect((rect) => {
          // 这里根据文字的实际高度和 view 的高度来判断是否显示展开按钮
          this.showExpandButton = rect.height > 40; // 假设一行高度是40px
        })
        .exec();
    });
  },
  methods: {
    toggleExpand() {
      this.isExpanded = !this.isExpanded;
    },
  },
};
</script>

<style>
.content {
  display: -webkit-box;
  -webkit-line-clamp: 1; /* 显示一行内容 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.expand {
  -webkit-line-clamp: unset; /* 取消行数限制，完全显示内容 */
}

.expand-button {
  color: #007aff;
  text-align: center;
  font-size: 14px;
  padding-top: 8px;
  cursor: pointer;
}
</style>