内容折叠组件

内容折叠

1，为了方便复用，我们封装一个组件，直接上代码
HTML代码

  <div>
    <el-col :span="span" class="font-first" ref="content">{{content}}</el-col>
    <el-col :span="2">
      <el-button
        class="btn-detail float-right"
        type="text"
        @click="handleZoom"
      >
        {{btnName ? (btnName === 1 ? '收起' : '展开') : ''}}
      </el-button>
    </el-col>
  </div>

js代码

props: {
    content: {
      type: String,
      default: ''
    },
    isExpand: {
      type: Boolean,
      default: true
    },
    span: {
      type: Number,
      default: 19
    },
    // offset: {
    //   type: Boolean,
    //   default: false
    // }
  },
  data () {
    return {
      btnName: 0 // 1:收起，2：展开
    }
  },
 watch: {
    content: {
      immediate: true,
      handler: function (val) {
        if (val) {
          this.handleHeight()
        }
      }
    }
  },  
  methods: {
    handleHeight () {
      this.$nextTick(() => {
        if (this.content) {
          let height = window.getComputedStyle(this.$refs.content.$el).height
          if (height.includes('px') && +height.slice(0, -2) > 20) {
            this.btnName = this.isExpand ? 1 : 2
            if (!this.isExpand) {
              this.$refs.content.$el.classList.add('custom-cell')
            } else {
              this.$refs.content.$el.classList.remove('custom-cell')
            }
          } else {
            this.btnName = 0
          }
        }
      })
    },
    handleZoom () {
      this.$refs.content.$el.classList.toggle('custom-cell')
      this.btnName = this.btnName === 1 ? 2 : 1
    }
  }

css代码

.float-right {
  float: right;
}
.font-first {
  overflow: hidden;
  font-size: 14px;
  line-height: 20px;
}

这样就实现了一个内容折叠功能拉