前端控制文本展开收起效果

默认展示一行，多出省略，显示更多按钮，点击更多按钮，展示全部文本；更多按钮切换为收起按钮，点击收起，将文本折叠。

html代码如下：

<div ref="calcWidth" :class="showMore ? 'showMoreInfo' : 'class_info' ">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
 <div v-show="showMoreInfo" class="more">
     <span v-if="!showMore" @click="showMore = true">更多 <i class="qw-icon-arrow-down"></i></span>
     <span v-else @click="showMore = false">收起 <i class="qw-icon-arrow-top"></i></span>
 </div>

JS代码：

data() {
  return {
    showMore: false, // 展开班级简介
    showMoreInfo: false, // 更多按钮显示与隐藏
  }
},
mounted() {
  this.$nextTick(() => {
    if(this.$refs.calcWidth.scrollWidth > this.$refs.calcWidth.clientWidth) {
      this.showMoreInfo = true
    } else {
      this.showMoreInfo = false
    }
  })
}

CSS代码:

.class_info {
  width: 65%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.showMoreInfo {
  width: 65%;
  overflow: auto;
  white-space: pre-wrap;
}