多行文字展开折叠

效果展示

MoMoreText.vue

<template>
  <div ref="refMoreText" class="more-text">
    <div ref="refContent" class="content">{{ text }}</div>
    <div ref="refTrigger" class="trigger text-primary trigger-bg" @click="handleTrigger" v-if="isExceed">
      <span>{{ moreVisible ? '收起' : '... 展开更多' }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

const props = defineProps({
  text: {
    type: String,
    default: ''
  },
  row: {
    type: Number,
    default: 2
  }
})

const refMoreText = ref()
const refContent = ref()
const refTrigger = ref()
const isExceed = ref(false)
const moreVisible = ref(false)

let fullHeight = 0 // 一开始的高度
let textHeight = 0 // 收起之后高度
let lineHeight = 0 // 行高

const handleTrigger = () => {
  moreVisible.value = !moreVisible.value

  if (moreVisible.value) {
    refTrigger.value.classList.remove('bg')
  } else {
    refTrigger.value.classList.add('bg')
  }

  setCssVar(moreVisible.value)
}

let resizeObserver: ResizeObserver | null = null

onMounted(async () => {
  fullHeight = refContent.value.clientHeight

  lineHeight = Number(window.getComputedStyle(refMoreText.value).lineHeight.slice(0, -2))

  textHeight = lineHeight * props.row

  if (refTrigger.value) refTrigger.value.style['lineHeight'] = lineHeight + 'px'

  resizeObserver = new ResizeObserver((entries) => {
    for (let entry of entries) {
      fullHeight = entry.contentRect.height
      isExceed.value = textHeight < fullHeight
      setCssVar(moreVisible.value)
    }
  })
  resizeObserver.observe(refContent.value)
})

const setCssVar = (visible: boolean) => {
  if (visible) {
    refMoreText.value.style.setProperty('--height', fullHeight + lineHeight + 'px')
    refMoreText.value.style.setProperty('--row', '')
  } else {
    refMoreText.value.style.setProperty('--row', props.row)
    refMoreText.value.style.setProperty('--height', textHeight + 'px')
  }
}

const unobserveElementSize = () => {
  if (resizeObserver) {
    resizeObserver.disconnect()
    resizeObserver = null
  }
}

onUnmounted(() => {
  unobserveElementSize()
})
</script>

<style lang="scss" scoped>
.more-text {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--row);
  line-clamp: var(--row);
  height: var(--height);
  line-height: 20px;
  word-break: break-all;
  white-space: pre-wrap;
  transition: height 0.3s;

  .content {
    // 设为absolute,避免高度被父元素影响
    position: absolute;
  }

  .trigger {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: var(--lineHeight);
    line-height: var(--lineHeight);
    padding-left: 120px;
    cursor: pointer;
  }

  .trigger-bg {
    background: linear-gradient(to right,
        rgb(255, 255, 255, 0) 0,
        rgb(255, 255, 255, 1) 60%,
        #fff 100%);
  }
}
</style>

使用组件

<template>
  <div class="app-container">
    <MoMoreText
      text="Resize Observer API 提供了一种解决此类问题的解决方案，此外，它还使你能够轻松观察和响应元素内容或边框的大小变化，并以高效的方式做出响应。它为 Web 平台中经常讨论的，缺乏元素查询提供了 JavaScript 解决方案。
用法很简单，并且与其他观察者（例如 Performance Observer 或者 Intersection Observer）几乎相同——你可以使用 ResizeObserver() 构造函数创建一个新的 ResizeObserver，然后使用 ResizeObserver.observe() 使其寻找特定元素大小的更改。每次更改大小时，构造函数中设置的回调函数便会运行，从而提供对新尺寸的访问，并允许你根据需要执行任何操作。"
      :row="2" />
  </div>
</template>

<script setup>
import MoMoreText from './MoMoreText.vue'
</script>

<style lang="scss" scoped>
.app-container{
  width: 300px;
  height: 100px;
}
</style>