插槽内容过长自动折叠需通过js动态测高并响应式控制：用ref获取offsetheight，结合line-clamp与lineheight计算临界高度，$nexttick确保渲染完成；用max-height过渡实现平滑动画；通过具名插槽暴露iscollapsed和toggle供父组件定制按钮；监听resize、prop变化及图片加载重测高度。
插槽内容过长时自动折叠，核心在于“测高 + 控制显示 + 响应交互”，不能只靠 CSS 截断（如 -webkit-line-clamp），因为 slot 内容类型不可控（可能是文本、图片、按钮、嵌套 div），必须用 JS 动态判断真实渲染高度，并配合 Vue 的响应式状态控制展开/收起逻辑。
用 ref 获取真实渲染高度，判断是否超限
给插槽外层容器加 ref，在 mounted 和 updated 钩子中读取 offsetHeight，并与目标行高 × 行数对比：
- 提前通过
props传入期望最大显示行数（如line-clamp="3"）和单行高度（line-height: 1.5rem） - 计算临界高度：
maxHeight = props.lineClamp * props.lineHeight - 对比
el.offsetHeight > maxHeight，结果存入data或ref（如needCollapse） - 注意：需用
$nextTick确保 DOM 渲染完成后再测量，尤其 slot 内容异步或含动态组件时
用内联样式 + 过渡实现平滑折叠动画
不要用 v-show 或 v-if 切换整个内容区，那样会丢失过渡效果。推荐用 max-height 控制：
- 初始状态设
:style="{ 'max-height': needCollapse ? `${maxHeight}px` : 'none' }" - CSS 中添加
transition: max-height 0.3s ease-in-out - 当
needCollapse === false时，max-height: none允许内容完全展开 - 避免直接设
height，因高度不确定；max-height更安全且支持过渡
折叠按钮与插槽协同，支持自定义位置和文案
按钮不是固定写死的，而是通过具名插槽（如 #toggle）或作用域插槽暴露状态，让父组件灵活控制：
- 组件内部提供
isCollapsed和toggle方法，通过v-slot="{ isCollapsed, toggle }"透出 - 默认按钮可放在右下角（用
position: absolute; bottom: 0; right: 0），也可由父组件决定放顶部、左侧或作为悬浮按钮 - 按钮文案支持传参：
expand-text="展开"/collapse-text="收起"，或直接用插槽传图标+文字组合 - 按钮仅在
needCollapse === true时渲染，避免无意义占位
响应窗口缩放与内容变化
用户调整浏览器大小、切换主题、或 slot 内容被动态修改（如富文本编辑后），都可能改变实际高度，需重新检测：
- 在
mounted中绑定window.addEventListener('resize', handleResize) - 在
beforeUnmount中移除监听，防止内存泄漏 - 对 slot 内容使用
watch监听关键 prop（如content、html），触发重测 - 若内容含图片，可监听
img.onload后再测高，或用IntersectionObserver等待加载完成
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
