vue中多行文本标签_vue控制多行文字展开收起的实现示例
這里講一下，如何使用vue控制多行文字展開收起(也叫控制文字展開隱藏)。
效果：
這里設置了控制三行，如果超過三行會展示，“顯示更多” 超出文字顯示省略號。點擊“顯示更多”會展開所有文案，按鈕變成“收起”
(未超出三行的時候)
(展開)
(收起)
代碼實現：
{{introduce}}
查看更多
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;
}
}
使用組件
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的vue中多行文本标签_vue控制多行文字展开收起的实现示例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： pos共识机制_OK区块链60讲 | 第
- 下一篇： html5倒计时秒杀怎么做,vue 设