关于前端: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;
}