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