vue 超出多行,省略,展示显示更多按钮
前期准备:根据字体大小和行数确定这个块整体的高度template<div class="desc" ref="desc">{{desc}}</div><button v-show="showButton">显示更多</button>script//获取高度是否超过4行判断是否展示查看更多按钮getShowMore(){const height = t
·
前期准备:根据字体大小和行数确定这个块整体的高度
template
<div class="desc" ref="desc">{{desc}}</div>
<button v-show="showButton">显示更多</button>
script
//获取高度是否超过4行判断是否展示查看更多按钮
getShowMore(){
const height = this.$refs.desc? this.$refs.desc.clientHeight : 0; //根据元素的clientheight来判断
if(height > 80){
this.showButton = true
}
else {
this.showButton = false
}
}
style
.desc{
font-size:14px;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-climp:4;
overflow:hidden;
}
更多推荐
已为社区贡献5条内容
所有评论(0)