vue 展开收起样式 超出为省略号

效果

组件

<template>
  <div class="remark-text">
    <div
      ref="textBox"
      class="text"
      :style="{ WebkitLineClamp: minLine ? minLine : 3 }"
      :class="{ 'all-text': showAll }"
    >
      <span
        class="btn"
        :class="{ all: showAll }"
        @click="showAll = !showAll"
        v-show="showBtn"
      ></span>
       <span ref="text" v-if="type === 'html'" v-html="text"></span>
      <span ref="text" v-else>{{ text }}</span> 
    </div>
  </div>
</template>

<script>
const blh = document.body.clientHeight / 1080;
export default {
  name: 'RemarkText',
  data() {
    return {
      showAll: false,
      showBtn: false,
    };
  },
  watch: {
    text() {
      this.$nextTick(() => {
        let textBoxH = this.$refs.textBox.offsetHeight;
        let textH = this.$refs.text.offsetHeight;
        if (textH - textBoxH > 16 * blh) {
          // 超出高度则展示 按钮
          this.showBtn = true;
        }
      });
    },
  },
  props: ['text', 'minLine', 'type'],
};
</script>

<style scoped lang="less">
.remark-text {
  display: flex;
  margin-bottom: 10px;
  .text {
    width: 100%;
    color: #222;
    font-size: 16px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-indent: 32px;
    &.all-text {
      -webkit-line-clamp: 999 !important;
    }
    .btn {
      float: right;
      clear: both;
      margin-right: 8px;
      color: @key-color;
      text-indent: 0;
      cursor: pointer;
      &::after {
        content: '展开';
      }
      &.all::after {
        content: '收起';
      }
    }
    &::before {
      content: '';
      float: right;
      width: 0;
      height: 100%;
      margin-bottom: -20px;
    }
  }
}
</style>

使用

<remark-text :text="desc" />
<remark-text :text="liveDesc" type="html" :minLine="4"/>