实现多行文本“展开收起” 超过一定行数隐藏/显示 Vue组件

vue组件，超过一定行数，将剩余内容隐藏，右下角显示...展开按钮。

info 要显示的文本内容
lineClamp 显示多少行
hiddenBtn 是有隐藏按钮，

<template>
  <div class="dp-text-ellipsis-wrapper">
    <div class="text" :class="textClass" :style="textStyleObject">
      <label class="btn" @click="showall = !showall"></label>
      {{ info }}
    </div>
  </div>
</template>
<script>
export default {
  name: 'DpTextEllipsis',
  props: {
    info: {
      type: String,
      default: '',
    },
    lineClamp: {
      type: Number,
      default: 3,
    },
    hiddenBtn: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      showall: false,
    }
  },
  computed: {
    textStyleObject() {
      return {
        'max-height': this.showall ? 'none' : `${1.5 * this.lineClamp}em`,
      }
    },
    textClass() {
      let cls = this.showall ? 'showall' : ''
      cls = cls + (this.hiddenBtn ? ' hidden-btn' : '')
      return cls
    },
  },
  watch: {
    info() {
      this.showall = false
    },
  },
}
</script>
<style lang="less">
.dp-text-ellipsis-wrapper {
  display: flex;
  margin: 6px 0 20px 0;
  overflow: hidden;
  font-size: 14px;
  line-height: 20px;

  .text {
    position: relative;
    overflow: hidden;
    line-height: 1.5;
    text-align: justify;
    text-overflow: ellipsis;
    word-break: break-all;
    transition: 0.3s max-height;
  }
  .text::before {
    float: right;
    height: calc(100% - 20px);
    content: '';
  }
  .text::after {
    position: absolute;
    width: 999vw;
    height: 999vw;
    margin-left: -100px;
    box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #fff;
    content: '';
  }
  .btn {
    position: relative;
    float: right;
    clear: both;
    margin-left: 10px;
    font-size: 14px;
    padding: 0 8px;
    color: #206ef7;
    line-height: 20px;
    border-radius: 4px;
    cursor: pointer;
    z-index: 10;
  }
  .btn::after {
    /* stylelint-disable-next-line */
    font-family: element-icons !important;
    content: '展开\e790';
  }

  .text.showall {
    max-height: none;
  }
  .text.showall .btn::before {
    visibility: hidden;
  }
  .text.showall .btn::after {
    visibility: hidden;
  }
  .text.showall.hidden-btn .btn::after {
    content: '收起\e78f';
    visibility: visible;
  }
  .btn::before {
    position: absolute;
    left: 1px;
    color: #333;
    transform: translateX(-100%);
    content: '...';
  }
}
</style>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
  
46
  
47
  
48
  
49
  
50
  
51
  
52
  
53
  
54
  
55
  
56
  
57
  
58
  
59
  
60
  
61
  
62
  
63
  
64
  
65
  
66
  
67
  
68
  
69
  
70
  
71
  
72
  
73
  
74
  
75
  
76
  
77
  
78
  
79
  
80
  
81
  
82
  
83
  
84
  
85
  
86
  
87
  
88
  
89
  
90
  
91
  
92
  
93
  
94
  
95
  
96
  
97
  
98
  
99
  
100
  
101
  
102
  
103
  
104
  
105
  
106
  
107
  
108
  
109
  
110
  
111
  
112
  
113
  
114
  
115
  
116
  
117
  
118
  
119
  
120
 

解决了 文章 https://juejin.cn/post/6963904955262435336

文章来源: fizzz.blog.csdn.net，作者：拿我格子衫来，版权归原作者所有，如需转载，请联系作者。

原文链接：fizzz.blog.csdn.net/article/details/118161070