JS文字超出规定长度，点击按钮展开与收缩；

文字太长，点击向下的箭头（按钮），展开文字， 箭头变成向上箭头，点击这个向上的箭头，收缩，同时箭头变成向下。
箭头是用两张图片来完成的，有些是展开与收起的文字按钮，写法相似。

<template>
  <div class="box">
    <p class="title">
      秋
    </p>
    <p class="sug" :class="{ close: infoLength > 1 && !more }">
      <span ref="info">秋高气爽，桂花飘香，收获的季节，看到人们都在忙忙碌碌的收获属于自己的果实，也许
        就是应了那句话，春种一棵树，秋收万颗子。
      </span>
      <span :class="{ absolute: !more }" v-if="infoLength > 1"  @click="lookMore">
        <img v-show="more" src="../static/icon/up.png" alt="">
        <img v-show="!more" src="../static/icon/down.png" alt="">
      </span>
    </p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      infoLength: '',
      more: false
    };
  },
  methods: {
    lookMore() {
      this.more = !this.more;
    },
    // 获取info行数
    getLineNum() {
      // getClientRects()获取元素占据页面的所有矩形区域
      this.infoLength = this.$refs.info.getClientRects().length;
    }
  },
  mounted() {
    this.getLineNum();
  },
};
</script>
<style lang="scss" scoped>
.box {
  margin: 20px 0;
  padding: 24px;
 .title{
   
 }
  .sug {
    padding: 0 px2rem(30) 0 px2rem(47);
    font-size: 24px;
    color: darkblue;
    line-height: px2rem(40);
    position: relative;
    img {
      vertical-align:middle;
      width: 12px;
      height: 12px;
    }
    .absolute {
      position: absolute;
      top: 0;
      right: 4px;
    }
  }
  .close {
    overflow: hidden; //超出部分隐藏
    text-overflow: ellipsis; //当对象内文本溢出时显示省略标记（...）
    display: -webkit-box; //弹性伸缩盒子模型显示
    -webkit-box-orient: vertical; // 甚至伸缩盒对象的子元素排列方式
    -webkit-line-clamp: 1; // 限制一个块元素显示文本的行数
  }
}
</style>