如何用Vue实现长尾词的多行文字展开和收起功能？

本文共计771个文字，预计阅读时间需要4分钟。

这里简单讲解一下，如何使用Vue控制多行文字展开收起（也称为控制文字展开隐藏）。

效果：这里设置了控制三行文字，如果超过三行会展开显示，显示显示更多+超出文字省略号。

具体实现：

1.在Vue组件的模板部分，可以使用``标签包裹要控制的文本区域，以便实现平滑的展开收起效果。

2.使用`v-show`或`v-if`指令来控制文本区域的显示与隐藏。

3.使用`v-on:click`监听点击事件，根据点击状态切换文本的展开与收起。

示例代码：

这里设置了控制三行文字，如果超过三行会展开显示，显示显示更多+超出文字省略号。 显示更多

.fade-enter-active, .fade-leave-active { transition: opacity 0.5s;}.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ { opacity: 0;}.text-content { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}.show-more { cursor: pointer;}

在上面的代码中，我们通过`isShowMore`变量控制文本区域的展开与收起，当点击显示更多按钮时，调用`toggleShowMore`方法切换`isShowMore`的值，从而实现展开收起效果。

这里讲一下，如何使用vue控制多行文字展开收起（也叫控制文字展开隐藏）。

效果：

这里设置了控制三行，如果超过三行会展示，“显示更多” 超出文字显示省略号。点击“显示更多”会展开所有文案，按钮变成“收起”

（未超出三行的时候）

（展开）

（收起）

代码实现：

<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> <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; } }, watch: { mes2(val) { this.introduce = val; if (this.introduce.length > 75) { this.isShowMore = true; } } } }; </script> <style lang="less" scoped> .m-content { &.overflow-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } } .btn-more { color: #fff; float: right; color: #5383E7; position: relative; margin-top: rc(5); padding-right: rc(33); &.more-collapse { &::after, &::before { top: 2px; transform: rotate(180deg); } &::before { top: 4px; } } &::after, &::before { width: 0; height: 0; content: ''; position: absolute; right: 0; top: 7px; border: rc(12) solid transparent; } &::after { border-top-color: #5383E7; z-index: 1; } &::before { border-top-color: #1c2239; z-index: 2; top: 5px; } } </style>

使用组件

<Spread :mes2="需要传递的文字数据"></Spread>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。