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
    }
}