Vue3 - 实现任意内容展开 / 收起功能组件插件，点击查看更多内容控制段落文字展开折叠效果，支持自定义多少行隐藏、展开折叠按钮自定义位置、自动计算展开和收起功能、插槽 slot 形式自定义各种样式_vue3查询条件展开和收起功能组件

作者：2023面试高手 | 2024-02-11 20:29:18

踩

vue3查询条件展开和收起功能组件

如果您需要 Vue2 版本的展开折叠功能，请访问这篇文章。

本文 实现了在 vue3 指定内容高度（超出固定高度后隐藏），用户点击展开和收起（折叠效果）查看更多内容的功能组件，

您可以传给组件任何内容（组件自动计算），并且您还可以指定 “容器在什么高度下隐藏”，以及展开收起按钮的位置等样式，

如下图所示，无论你的内容是纯文本、div 容器、标签元素，都可以自动计算，

当短于指定行数时，不显示按钮！

组件源码干净整洁，无任何乱七八糟的样式

在这里插入图片描述

组件位置无所谓，最后确保正确引入即可。

在 components 文件夹下，新建 collapse.vue 文件，一键复制以下代码。

<templa

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/76842