评论 展开|收起

场景：展开收起

方案一：文本超出省略

方案：在div 中添加一个span 然后给div设置超出三行省略，这时候就可以获取到文本高度和div高度了

优点：很好的行数限制，低于某个行数全部显示；且对换行空格也有效

缺点：像评论列表这种内容不固定带标签，文字的，手机上会发现判断有误，需要进一步优化。后我想到一个折中办法是把判断字符串长度的判断也加上可以弥补一下

适用场景：纯文本

<template>
  <div class="text-box">
    <div :class="['txt', { 'over-hidden': !unfold }]" ref="textBox">
      <span ref="spanBox">{
  {content}}</span>
       <div v-if="ifOver" @click="unfold = !unfold" class="btn"
       		:class="[unfold ? 'btn-open' : 'btn-close']">{
  {unfold ? '收起' : '展开'}}</div>
    </div>
  </div>
</template>
<script>
export default {
     
  name: "text-box",
  data() {
     
    return {
     
      ifOver: false, // 文本是否超出三行，默认否
      unfold: false // 文本是否是展开状态 默认为收起
    };
  },
  props: {
     
    content: {
     
      type: String,
      default: ""
    }
  },
  mounted() {
     
    // 判断是否显示展开收起按钮
    this.ifOver = this.$refs.spanBox.offsetHeight > this.$refs.textBox.offsetHeight
  }
};