readMore/阅读更多

readMore/阅读更多 封装

<template>
  <view class="read-more">
    <view class="express">
      <view class="info">
        <view class="content" :class="{ hide: !isInfo }" ref="content">
          {{ content }}
        </view>
        <view class="tips" @click="showinfo" v-if="!isInfo && isContentLongEnough">
          <u-icon
            name="arrow-down"
            size="14"
            :color="color"
            label="展开"
            labelPos="left"
            :labelColor="labelColor"
            labelSize="14"
          ></u-icon>
        </view>
      </view>
      <!-- <view class="tips hidebtn" @click="showinfo" v-if="isInfo">
        <u-icon
          name="arrow-up"
          size="14"
          :color="color"
          label="收起"
          labelPos="left"
          :labelColor="labelColor"
          labelSize="14"
        ></u-icon>
      </view> -->
    </view>
  </view>
</template>

<script>
export default {
  name: 't-readmore',
  props: {
    color: {
      type: String,
      default: '#000',
    },
    labelColor: {
      type: String,
      default: '#FA312A',
    },
    content: {
      type: String,
      default: '',
    },
    iSinfo: {
          type: Boolean, // 你可以根据实际需要选择不同的类型
          default: false, // 设置默认值为 false，表示默认折叠状态
        },
  },
  data() {
    return {
      isInfo: this.iSinfo,
    };
  },

  computed: {
    isContentLongEnough() {
      return this.content.length > 20;
    },
  },
  methods: {
    showinfo() {
      // this.isInfo = !this.isInfo;
      this.isInfo = false;
      this.$emit('read-more', this.isInfo)
    },
  },
};
</script>

<style lang="scss" scoped>
.read-more {
  // 展开收起
  .express {
    position: relative;
    margin: 0 17rpx;
    .info {
      display: flex;
      flex-direction: column;
      .content {
        word-break: break-word;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        font-size: 14px;
        font-family: PingFang;
        font-weight: 400;
        color: #999999;
        line-height: 46rpx;
        letter-spacing: 4rpx;
      }
      .tips {
        width: 140rpx;
        height: 40rpx;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%);
        position: absolute;
        bottom: 5rpx;
        right: 16rpx;
      }
    }
  }

  // 收起 按钮
  // .hidebtn {
  //   display: flex;
  //   flex: 1;
  //   justify-content: flex-end;
  //   color: #0078FF;
  //   font-size: 28rpx;
  //   position: absolute;
  //   right: 16rpx;
  //   bottom: 0rpx;
  //   line-height: 46rpx;
  //   letter-spacing: 4rpx;
    
  // }

  // 展开 文字
  .hide {
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    font-size: 14px;
    font-family: PingFang;
    font-weight: 400;
    color: #999999;
    line-height: 46rpx;
    letter-spacing: 4rpx;
   
  
  }
}
</style>

如果需要展开收起，把收起的部分取消注释即可