vue实现数据超出单行显示更多,点击展开剩余数据
vuejs数据超出单行显示更多,点击展开剩余数据
·
效果图
1.当数据过长时的效果
2.数据不超过一行时的效果
原理:利用文本撑开的高度和单行时的高度进行判断,文本内容是否过长,需要隐藏
代码实现
html代码
<div class="checkitem">
<div class="info">
<div>
<span class="txtinfos">启用文件检测</span>
<el-switch width="35" v-model="valuetel"></el-switch>
</div>
<span class="spanp">
<p>
启用文件检测功能将会严重影响系统功能,请谨慎评估后选择
</p>
<p>
目前支持类型
</p>
<p class="txttype" ref="txttype" :class="hidetext==true?'hidetext':''">
<span>
Word 2003 / Word 2007 / Word 2010 / Excel 2003 / Excel 2007 / Excel 2010 / PowePoint 2003 / PowePoint 2007 / Word 2003 / Word 2007 / Word 2010 / Excel 2003 / Excel 2007 / Excel 2010 / PowePoint 2003 / PowePoint 2007 /
</span>
<a class="more" v-if="nomore" @click="lookmore">{{moretext}}<i :class="hidetext==false?'el-icon-arrow-up':'el-icon-arrow-down'"></i></a>
</p>
<p>备注:以上文件为未加密文件类型</p>
</span>
</div>
</div>
部分css
.txttype{
letter-spacing: 0.5px;line-height: 20px;
position: relative;
}
.hidetext{
position: relative;
height: 20px;
overflow: hidden;
span{
display: block;
width: calc(100% - 100px);
}
}
js代码
在data里定义数值
data() {
return {
moretext:'查看更多',
nomore:true,
hidetext:false,
}
}
在mounted中获取高度
mounted(){
//通过ref获取对应dom节点的高度,注意20为单行时的高度
let hei = this.$refs.txttype.clientHeight;
//当获取的高度大于20时,即当前文本为多行,设置添加收起文本的class,
//当获取的高度等于20时,隐藏查看更多按钮
if(hei>20){
this.hidetext = true
this.nomore = true
}else if(hei==20){
this.nomore = false
}
},
点击查看更多的方法
methods:{
//查看更多
lookmore(){
this.hidetext = !this.hidetext
this.moretext = this.hidetext==true?'查看更多':'收起'
},
}
更多推荐
已为社区贡献9条内容
所有评论(0)