Vue实现文字展开收起：三行以上显示‘显示更多’

"本文将介绍如何在Vue.js项目中实现多行文字的展开与收起功能，通过控制显示的文本行数，展示“显示更多”或“收起”按钮，以适应不同场景的需求。示例代码包括模板、脚本和样式部分，详细解释了每个部分的作用和工作原理。" 在Vue.js开发中，有时我们需要对长段落的文字进行裁剪，只显示前几行，并在超出限制时提供一个“显示更多”按钮，让用户自行决定是否展开全部内容。本示例将展示如何实现这一功能，特别关注三行文字的限制。 首先，来看模板部分： ```html <template> <div> <p class="m-content overflow-line" id="J_description">{{ introduce }}</p> <button type="button" class="btn-more" v-if="isShowMore" id="J_btnmore" @click="showmoreDesc($event)">查看更多</button> </div> </template> ``` 这里，`<p>`标签用于展示文本，类`overflow-line`用于处理超出三行的文本。`<button>`标签则是在文字超出三行时显示，用户点击后可以展开或收起内容。`v-if`指令根据`isShowMore`的状态决定按钮是否显示，`@click`监听点击事件，调用`showmoreDesc`方法。 接着是脚本部分： ```javascript <script> export default { name: 'Spread', data() { return { isShowMore: false, isDescStatus: true, introduce: "", }; }, props: { mes2: { type: String, default: "", }, }, methods: { showmoreDesc(e) { let el = e.currentTarget; el.previousElementSibling.classList[ !this.isDescStatus ? 'add' : 'remove' ]('overflow-line'); el.classList[ this.isDescStatus ? 'add' : 'remove' ]('more-collapse'); el.innerHTML = !this.isDescStatus ? '查看更多' : '收起'; this.isDescStatus = !this.isDescStatus; // that.isShowMore = true; // 注意：此处的"that"可能应改为"this" }, }, watch: { mes2(val) { this.introduce = val; if (this.introduce.length > 75) { this.isShowMore = true; } }, }, }; </script> ``` 在这个部分，我们定义了一个名为`Spread`的组件，包含数据属性`isShowMore`用于控制按钮的显示，`isDescStatus`用于控制文本的展开与收起状态，以及`introduce`用于存储待显示的文本。`props`接收父组件传递的`mes2`，并将其赋值给`introduce`。`showmoreDesc`方法处理按钮点击事件，改变文本的样式以及按钮的文字和状态。`watch`监听`mes2`的变化，当文本长度超过75个字符时，自动设置`isShowMore`为`true`，显示按钮。 最后，样式部分（这里使用的是Less）： ```less <style lang="less" scoped> .m-content { &.overflow-line { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .more-collapse { display: none; } } .btn-more { /* 添加你的按钮样式 */ } </style> ``` 这部分CSS（Less）代码用于控制文本的溢出和“显示更多/收起”按钮的显示。`-webkit-line-clamp`属性用于限制显示的行数，`overflow`隐藏超出的部分。`.more-collapse`类用于在文本展开时隐藏“显示更多”按钮。 总结来说，这个示例通过Vue.js的响应式系统和DOM操作，实现了多行文字的动态展开和收起功能。当文本超出预设行数时，显示“显示更多”按钮，用户点击后可以查看全部内容，再次点击则收起。整个过程通过组件化的方式封装，方便在项目中复用。