這里講一下，如何使用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;

}

}

使用組件

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。