vue 文本超出展开收缩展示

<template>
  <div>
    <div class="intro">
      <div
        class="container"
        ref="index"
        :class="fold ? 'fold' : 'unfold'"
        v-if="imgobj.intro !== ''"
      >
        <label
          >&nbsp;&nbsp;&nbsp;&nbsp;
          <span>{{ imgobj.intro }}</span>
        </label>
      </div>
      <div v-show="csses" style="  cursor: pointer; color:#8be2f5;">
        <div class="show" @click="handleFold" v-show="fold">展开</div>
        <div class="show" @click="handleFold" v-show="!fold">收起</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  created() {},
  data() {
    return {
      imgobj: {},
      fold: true,
      csses: false
    }
  },
  mounted() {
    setTimeout(() => {
      this.router() // 这里用定时器延迟是因为防止DOM未加载完获取不到文本的高度
    }, 1000)
  },
  methods: {
    handleFold() {
      this.fold = !this.fold
    },
    router() {
      if (
        //获取文本的高度判断是否大于80 与文本的长度是否大于100
        this.$refs.index.offsetHeight >= 80 &&
        this.imgobj.intro.length > 100
      ) {
        // 大于就展示“展开”“收缩”俩字
        this.csses = true
      } else {
        // 小于就不展示“展开”“收缩”俩字
        this.csses = false
      }
    }
  }
}
</script>
<style lang="less" scoped>
.container{
       width: 880px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
       span {
        line-height: 28px;
      }
}
.container.fold {
  -webkit-line-clamp: 3;
}
.container.unfold {
  -webkit-line-clamp: 100;
}
</style>