Vue 实现文本溢出展开和收起的功能

本文的主要思路是判断dom元素的高度有没有超过规定高度，如果超过规定高度的话就通过动态绑定class的方法绑定溢出省略的样式，然后通过展开和收起按钮控制状态的改变来实现是否绑定溢出样式来实现展开与收起，该思路能够简单的实现展开与收起的功能。

 

本次实现的是溢出两行省略，以下是溢出两行省略的css代码

.close {
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden; //溢出内容隐藏
      text-overflow: ellipsis; //文本溢出部分用省略号表示
      display: -webkit-box; //特别显示模式
      -webkit-line-clamp: 2; //行数
      line-clamp: 2;
      -webkit-box-orient: vertical; //盒子中内容竖直排列
    }

给需要实现的dom元素动态绑定上该样式

<div :class="{ close: isClose }" ref="explainText">
    {{ explain.function ? explain.function : '-' }}
</div>
<div v-if="isOver" @click="changeStatus">
    <span>{{ textStatus }}</span>
</div>

data() {
  return {
    isClose: false,
    isOver: false,
    textStatus: '展开'
  }
},

通过修改isClose变量的状态来实现展开与收起，isOver变量来控制是否显示展开/收起这个按钮。

接下来是如何获取dom元素的高度，通过$refs获取元素的offsetHeight的属性，该属性为dom元素的高度。注意，在vue生命周期中create和mounted是无法获取到的，此时dom还未渲染好，解决的方法一种是通过setTimeout方法延迟获取高度，另一种是在向后端请求数据之后在finally()中获取，本文采用后者。

    getData() {
      getData()
        .then(response => {
  
        })
        .finally(() => {
          const height = this.$refs.explainText.offsetHeight
          if (height > 32) {
            this.isOver = true
            this.textStatus = '展开'
            this.isClose = true
          }
        })
    },

然后在页面created生命周期中进行调用就能获取到dom的高度，32px是两行文本的dom元素高度，高度大于32px即文本超过了两行，这里由于写死了，存在一定的隐患。

之后可以通过按钮的点击来切换展开和收起的状态

changeStatus() {
  if (this.textStatus === '展开') {
    this.textStatus = '收起'
    this.isClose = false
  } else if (this.textStatus === '收起') {
    this.textStatus = '展开'
    this.isClose = true
  }
}