epmet-work-pc-chengyang/src/views/components/foldText.vue

<template>
  <div class="m-fold_text" :class="initOk ? '' : 'z-init'">
    <div
      id="cnt"
      ref="foldSlot"
      class="fold_text-cnt"
      :class="isFolded ? 'z-fold-' + row : ''"
    >
      <slot></slot>
    </div>
    <div v-if="!noNeedFold" class="fold_text-btn" @click="shiftFold">
      {{ isFolded ? "展开" : "收起" }}
    </div>
  </div>
</template>

<script>
import nextTick from "dai-js/tools/nextTick";

export default {
  name: "ResiSearch",
  props: {
    row: {
      type: Number,
      default: 2,
    },
    lineHeight: {
      type: Number,
      default: 24,
    },
  },
  data() {
    return {
      initOk: false,

      isFolded: false,

      noNeedFold: false,
    };
  },
  computed: {},
  watch: {},
  created() {
    this.init();
  },
  methods: {
    async init() {
      await nextTick();

      const height = await this.$refs.foldSlot.offsetHeight;
      const { row, lineHeight } = this;

      let noNeedFold = height / row < lineHeight;

      this.noNeedFold = noNeedFold;
      this.isFolded = !noNeedFold;
      this.initOk = true;
    },

    shiftFold() {
      let { isFolded } = this;
      this.isFolded = !isFolded;
    },
  },
};
</script>

<style lang="scss" scope>
// 清除容器自身浮动
@mixin cs {
  &::after {
    display: block;
    visibility: hidden;
    clear: both;
    overflow: hidden;
    height: 0;
    content: "";
  }
}

// 不换行显示省略号
@mixin toe {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-wrap: normal;
}

// 强制文本换行 多行
@mixin toeM($num) {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: $num;
  -webkit-box-orient: vertical;
}

.m-fold_text {
  @include cs;

  &.z-init {
    background-color: rgba(#000, 0.05);
    > view {
      visibility: hidden;
    }
  }

  .fold_text-cnt {
    &.z-fold-1 {
      @include toe;
    }
    &.z-fold-2 {
      @include toeM(2);
    }
    &.z-fold-3 {
      @include toeM(3);
    }
    &.z-fold-4 {
      @include toeM(4);
    }
    &.z-fold-5 {
      @include toeM(5);
    }
  }

  .fold_text-btn {
    float: right;
    margin-right: -4px;
    padding: 0 5px;
    line-height: 20px;
    color: #0c81fe;
    cursor: pointer;
  }
}
</style>