文本超出两行显示省略号并有“展开”“收起”按钮效果

最新推荐文章于 2025-06-24 09:47:52 发布

原创最新推荐文章于 2025-06-24 09:47:52 发布 · 844 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js #vue3.x ref

本文介绍了一个基于Vue的模板，实现文本内容在超出显示时的动态展开和收起功能，通过监听窗口大小变化自动调整显示模式，适用于单行或多行内容的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!-- 文字超出显示... -->
<template>
  <div class="text_ellipsis_container">
    <div
      :class="!showMoreStatus && 'overflow_ellipsis'"
      :style="{ '-webkit-line-clamp': lineNum }"
      ref="content"
    >
      {{ text }}
    </div>
    <div class="content_copy" ref="contentCopy">
      {{ text }}
    </div>
    <div v-if="showBtn" @click="handleArrowChange" class="status_btn">
      <span>{{ showMoreStatus ? '收起' : '展开' }}</span>
      <svg-icon
        :name="showMoreStatus ? 'loading_icon_direction-down' : 'loading_icon_direction-up'"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    text: string
    lineNum?: number // 显示的行
  }>(),
  {
    lineNum: 1,
  }
)

// 显示 展开/收起
const showMoreStatus = ref(false)

function handleArrowChange() {
  showMoreStatus.value = !showMoreStatus.value
}

const showBtn = ref(true)
const content = ref()
const contentCopy = ref()
// 是否显示展开/收起按钮
function isShowBtnFunc() {
  nextTick(() => {
    if (props.lineNum > 1) {
      // 多行通过比较自身的clientHeight、scrollHeight进行判断
      showBtn.value = content.value.clientHeight < content.value.scrollHeight
    } else {
      // 单行通过比较content和contentCopy的clientWidth进行判断
      showBtn.value = content.value.clientWidth < contentCopy.value.clientWidth
    }
  })
}

onMounted(() => {
  window.addEventListener('resize', isShowBtnFunc)
  isShowBtnFunc()
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', isShowBtnFunc)
})
</script>

<style scoped lang="scss">
.text_ellipsis_container {
  display: flex;

  .overflow_ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box; //将对象作为弹性伸缩盒子模型显示。
    -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
  }

  .content_copy {
    position: absolute;
    display: inline-block;
    visibility: hidden;
  }

  .status_btn {
    cursor: pointer;
    color: $primary-color;
    margin-left: 10px;
    white-space: nowrap;
  }
}
</style>