vue实现数据超出单行显示更多,点击展开剩余数据

效果图

1.当数据过长时的效果

 

 2.数据不超过一行时的效果

原理：利用文本撑开的高度和单行时的高度进行判断，文本内容是否过长，需要隐藏

代码实现

html代码

		

			

				

					启用文件检测
					
				
				
			        

			           启用文件检测功能将会严重影响系统功能，请谨慎评估后选择
			        
			        

			           目前支持类型
			        
		            

		                
		                 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 / 
		                
						{{moretext}}
					
					
备注：以上文件为未加密文件类型
				
			
		

部分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?'查看更多':'收起'
      },
}