迷离的夜空，灰黑色的天际悬着一轮金色的孤舟，载着满仓的梦想，驶向云层深处；凉风微微的吹袭着黑夜的素纱，掸掉岁月的风尘；融融的月光静静的流淌，冲断记忆的决堤；零星点点，柔柔的洒在树叶上，泛出浅浅的绿；如华的银色裹住一丝清凉，铺设一地的奢华。
这里讲一下，如何使用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>
以上就是vue控制多行文字展开收起的如何实现示例。我也喜欢过一个女生，这个星期给她表白了，虽然被拒绝了，但是起码我的第一次心动没有遗憾。更多关于vue控制多行文字展开收起的如何实现示例请关注haodaima.com其它相关文章！
