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

效果图

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