vue实现文本展开收起功能

时间：2023-04-01 12:56:34 vue.js

首先准备一个计算字符个数的函数//计算字符个数byteCount(str){constcount=(str&&str.replace(/[^\x00-\xff]/g,"xx").length)||0;returncount;}，处理从接口获取的数据。如果此处的字符数大于170，则会显示展开按钮。这个数字需要慢慢调试list.forEach((item)=>{if(this.byteCount(item.info)>170){item.spread=false;}展开折叠标签写法展开

Collapse

展开和折叠对应的jsspreadText(obj){obj.spread=!obj.spread;}，需要折叠的文字标签的写法逻辑主要是控制-webkit-line-clamp的行数，设置数字是显示相应的行数，不设置是展开所有

对应class.spread-box的css写法{//多行文字溢出显示省略号（兼容性问题）：//控制框的大小//溢出隐藏overflow:hidden;//显示省略号以表示修剪后的文本text-overflow:ellipsis;//灵活的盒模型显示display:-webkit-box;//限制在一个块元素中显示的文本行数（写成内联样式）//-webkit-line-clamp:4;//设置或获取flexbox对象的子元素-webkit-box-orient:vertical;}

上一篇：前端面试日常3+1——Day600

下一篇：更多答案尽在前端面试日2020-03-18

vue实现文本展开收起功能相关文章