textMore-自动检测文本文字超过2行添加展开按钮，未超过则不显示展开按钮，溢出部分显示省略号-vue3.0（一）

<template>
  <!-- 自动检测文本文字超过2行添加展开按钮，未超过则不显示展开按钮，溢出部分显示省略号-->
    <div class="text-container">
      <div ref="textDiv" class="text-content">
        {{ text }} 
      </div>
      <div class="flex justify-end ">
        <button v-if="isTruncated" @click="toggleExpand" class="expand-btn flex items-center">
           {{ !isExpanded ? '展开更多' : '收起' }}
           <template v-if="!isExpanded">
          <el-icon :size="14">
            <ArrowDown />
          </el-icon>
        </template>
        <template v-else>
          <el-icon :size="14">
            <ArrowUp />
          </el-icon>
        </template>
          </button>
      </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue';
const props = defineProps({
  textTcontent: {  //文本
    type: String,
    default:'',
  },
})


// const text = ref('这里是一段示例文本内容，用于测试文本是否会超过两行，进而决定是否显示展开按钮，你可以替换成实际的长文，进而决定是否显示展开按钮，你可以替换成实际的长文，进而决定是否显示展开按钮，你可以替换成实际的长文，进而决定是否显示展开按钮，你可以替换成实际的长文，进而决定是否显示展开按钮');

const text = ref(props.textTcontent);
const isTruncated = ref(false);
const isExpanded = ref(false);
const textDiv = ref(null);

// 检查文本是否截断
const checkTruncation = () => {
  const element = textDiv.value;
  if (element) {
    const clientHeight = element.offsetHeight;
    const scrollHeight = element.scrollHeight;
    isTruncated.value = scrollHeight > clientHeight;
  }
};

// 切换展开收起状态
const toggleExpand = () => {
  isExpanded.value = !isExpanded.value;
  const element = textDiv.value;
  if (element) {
    if (isExpanded.value) {
      element.style.webkitLineClamp = 'unset';
    } else {
      element.style.webkitLineClamp = '2';
      checkTruncation();
    }
  }
};

onMounted(() => {
  checkTruncation();
});

//使用方法：<TextMore :textTcontent="item.description" />


</script>

<style scoped>
.text-content {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.expand-btn {
  margin-top: 5px;
  font-size: 12px;
  color: #409eff;
}
</style>