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

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

<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>