vue uni小程序 实现多行文本溢出 展开和收起

页面效果

完整代码

<template>
<view class="main-wrapper">
    <view class="content">
          <view :class="[!onShow ? 'hide' : 'show']">
                <view class="info-text">{{ initName }}</view>
                </view>
                <text v-if="needShowExpande && !onShow" @click="showText">
                  展开
                </text>
           </view>
              <text
                v-if="needShowExpande && onShow"
                class="hideButton"
                @click="showText"
              >
                收起
    </text>
 </view>
 </template>
 <script lang="ts" setup>
 import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
 @Component
 export default class Test extends Vue {
   onShow = true;
   needShowExpande = true;
   twoLineHeight = null; // 两行文本的高度
   initName = '这个地方非常好这个地方非常好这个地方非常好这个地方非常好这个地方非常好这个地方非常好这个地方非常好这个地方非常好这个地方非常好这个地方非常好这个地方非常好'
   showText() {
    this.onShow = !this.onShow;
  }
  // 初始化的时候调用获取文本高度
   initTextHeight() {
    this.getTwoLineHeight().then((lineHeight) => {
      uni
        .createSelectorQuery()
        .in(this)
        .select('.info-text')
        .boundingClientRect((res) => {
          // 如果签名内容高度大于计算出来的高度的话，那么就不止两行文字
          if (res.height > lineHeight) {
            this.needShowExpande = true;
            this.onShow = false;
          } else {
            this.needShowExpande = false;
            this.onShow = true;
          }
        })
        .exec();
    });
  }
  // 获取两行文本的高度
  getTwoLineHeight() {
    if (this.twoLineHeight) {
      return this.twoLineHeight;
    } else {
      this.twoLineHeight = new Promise((resolve) => {
        uni
          .createSelectorQuery()
          .in(this)
          .select('.info')
          .boundingClientRect((res) => {
            if (res) {
              resolve(Math.ceil((res.height * 5) / 2));
            } else {
              // 获取系统屏幕宽度
              const systemWidth = uni.getSystemInfoSync().screenWidth;
              // 计算出一行的行高
              const lineHeight = ((systemWidth * 28) / 750) * 1.5;
              // 计算两行多一点的高度，留一点安全距离
              resolve(Math.ceil(lineHeight * 2.2));
            }
          })
          .exec();
      });
      return this.twoLineHeight;
    }
  }
 }
 </script>
 <style>
   .main-wrapper {
      display: flex;
      flex-direction: column;
      position: relative;

      .content {
        display: flex;
        flex-direction: column;
        view {
          font-size: 32rpx;
          color: #fff;
          word-break: break-word; 
        }

        text {
          width: 70px;
          font-size: 32rpx;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          color: #0078ff;
          position: absolute;
          bottom: 0;
          right: -60rpx;
        }
      }
    .hideButton {
      display: flex;
      flex: 1;
      justify-content: flex-end;
      color: #0078ff;
      font-size: 32rpx;
    }
    .hide {
      word-break: break-word; 
      overflow: hidden;
      text-overflow: ellipsis; 
      display: -webkit-box;
      -webkit-line-clamp: 2; //此处为上限行数
      -webkit-box-orient: vertical;
    }
    .show {
      display: -webkit-box;
      -webkit-line-clamp: unset;
    }
}
 </style>

参考大佬文章：juejin.cn/post/696390…