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

效果：

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

(未超出三行的时候)

(展开)

(收起)

代码实现：

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;

}

}

}

};

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

}

}

使用组件

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