vue实现文字展开收起功能

先准备一个计算字符数的函数

// 计算字符数
byteCount(str) {
  const count = (str && str.replace(/[^\x00-\xff]/g, "xx").length) || 0;
  return count;
},

对从接口中获取到的数据进行处理
我这里字符数大于170就显示展开按钮
这个数字需要自己慢慢调试

list.forEach((item) => {
  if (this.byteCount(item.info) > 170) {
    item.spread = false;
}

展开收起标签写法

<div v-show="item.spread === false" 
  @click="spreadText(item)" 
  class="spread-btn">
  <span>展开</span>
</div>

<div v-show="item.spread === true" 
  @click="spreadText(item)"
  class="spread-btn">
  <span>收起</span>
</div>

展开收起逻辑对应的js

spreadText(obj) {
  obj.spread = !obj.spread;
},

需要折叠的文字标签写法
样式逻辑主要就是控制-webkit-line-clamp的行数
设置数字就是显示对应行数 不设置就是全部展开

<div class="spread-box" :style="{'-webkit-line-clamp': item.spread ? '': '4'}">
  <div v-if="item.info" v-html="item.info"></div>
</div>

对应类的css写法

.spread-box {
  // 多行文本溢出显示省略号(有兼容性问题):
  // 控制好盒子大小
  // 溢出隐藏
  overflow: hidden;
  // 显示省略符号来代表被修剪的文本
  text-overflow: ellipsis;
  // 弹性伸缩盒子模型显示
  display: -webkit-box;
  // 限制在一个块元素显示的文本的行数(已写在行内样式)
  // -webkit-line-clamp: 4;
  // 设置或检索伸缩盒对象的子元素的排列方式
     -webkit-box-orient: vertical;
}