vue-列表下文字的的展开与折叠

         

功能描述

1、默认显示两行数据，点击时展示全部数据

2、点击A项，A展开，之后有两种情况：①再次点击A，A折叠；②点击其他项，如B，这时B展开，A折叠

解决方式

1、使用bottom来定义默认样式，使用bottom2来定义展开样式，通过切换class来设置展开与折叠时文字内容的样式

<div :class="[showDetail!=index? bottom:bottom2]" @click="foldAndUnfold(index,item)"> {{item.dutyRecord}} </div> data():{ return{ showDetail:-1, //记录点击项的小标 bottom:'bottom', //类 bottom2:'bottom2' } } .bottom{ ... over-flow:hidden; text-overflow:ellipsis; display:-weblit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .bottom2{ ... }

2、使用showDetail（默认设置为-1）与index（循环数据项的索引值）做比较：

①showMaterial默认为-1，第一次任意点击A，当前A对象展开，showMaterial=index=0，此时有两种情况：

// 情况1,再次点击A，showMaterial===index，A关闭，showMaterial=-1

// 情况2，点击A以外的其他对象C，先关闭A，在打开当前对象C，showMaterial=index=2

foldAndUnfold(index,item){ if(this.showDetail===index){//两次点击的对象相同，关闭 this.showDetail = -1 }else{//点击的对象不同，先关闭前一对象，再打开当前对象 this.showDetail = index } }