实现文章内容过多时的展开收起效果

通过计算文章内容的高度来确定是否需要显示展开按钮，然后根据用户的点击来展开或收起文章内容。以下是一个简单的实现示例：

<template>
  <div class="article">
    <div v-if="isContentOverflow" :style="{ maxHeight: contentMaxHeight + 'px' }" ref="content" class="content">
      {{ articleContent }}
    </div>
    <button v-if="isContentOverflow" @click="toggleContent" class="toggle-button">
      {{ showFullContent ? '收起' : '展开' }}
    </button>
  </div>
</template>

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

const articleContent = ref<string>(
  '文章内容，这里是一段很长的文章内容。文章内容，这里是一段很长的文章内容。文章内容，这里是一段很长的文章内容。'
);
const contentMaxHeight = ref<number>(100); // 设置最大高度
const showFullContent = ref<boolean>(false);

const isContentOverflow = computed(() => {
  const contentEl = document.getElementById('content');
  return contentEl ? contentEl.scrollHeight > contentMaxHeight.value : false;
});

const toggleContent = () => {
  showFullContent.value = !showFullContent.value;
};

onMounted(() => {
  const contentEl = document.getElementById('content');
  if (contentEl) {
    contentMaxHeight.value = contentEl.clientHeight;
  }
});
</script>

<style scoped>
.article {
  position: relative;
}
.content {
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.toggle-button {
  position: absolute;
  bottom: 0;
  right: 0;
}
</style>

首先通过计算属性isContentOverflow判断文章内容是否溢出，如果溢出则显示展开按钮。然后根据用户点击来切换showFullContent的值，以展开或收起文章内容。通过设置contentMaxHeight，可以调整文章内容的最大高度。