vue 循环列表文本展开与收起

两天写项目遇到的问题是vue 循环列表文本展开与收起,所以自己封装了一个组件，毕竟其他地方会用到的！
子级组件：

<template>
  <div class="wrap">
    <div :class="textOver && !btnFold ? 'inner over' : 'inner'" ref="divRef">
      <span class="content" ref="spanRef">{{ showContent }}</span>
    </div>
    <span class="btn" v-if="textOver" @click="btnFold = !btnFold">{{
      btnFold ? "收起" : "展开"
    }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textOver: false, //文本是否超出3行
      btnFold: false, //按钮默认显示展开
    };
  },
  props: {
    showContent: {
      type: String,
      default: false,
    },
  },
  created() {
      this.$nextTick(() => {
      // 判断文本是否超过3行
      if (this.$refs.divRef) {
        let descHeight = window
          .getComputedStyle(this.$refs.divRef)
          .height.replace("px", "");
        console.log("descHeight:" + descHeight);
        if (descHeight > 60) {
          this.textOver= true;
        } else {
          this.textOver= false;
        }
      }
    });
   },
  mounted() {},
  methods: {},
};
</script>

<style scoped>
.wrap {
  padding-bottom: 30px;
}
.over {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.btn {
  font-size: 14px;
  color: #198bff;
  float: right;
  cursor: pointer;
  margin-top: 10px;
}
</style>

父级组件：

 <div class="info2">
          <span>描述：</span>
          <div class="summary">
            <foldText :showContent="items.description"></foldText>
            <!-- <p class="content">{{items.description}}</p> -->
          </div>
  </div>

 .info2 {
          display: flex;
          justify-content: space-between;
          padding: 0 10px;
          font-size: 13px;
          span {
            flex: 2;
          }
          .summary {
            flex: 5;
            overflow: hidden;
            margin-bottom: 5px;
            line-height: 22px;
            word-break: break-all;
            text-indent: 2em;
            text-align: right;
           }
  }