在仿豆瓣中有一个展开的小按钮,点击可以展开全部的内容介绍,不展开的话则只显示三行。
这里我是直接用一个控制添加多行省略的类来实现这个效果的。
<p id="showAll" :class="{ellpes:!showAll}">{{data.showAll}}}</p>
<a @click="fun_showAll" href="javascript:void(0)">( {{showAll?"收起":"展开"}} )</a>
data.showAll是data中的每个属性,而showAll则是我定义的一个控制切换的变量。
每次点击a标签的时候就是切换了showAll这个数据的值。
fun_showAll(){
this.showAll=!this.showAll;
},
当这个数据改变的时候a标签的显示文本也会随之改变,而p的类也会改变,如果showAll就不添加ellpes类,如果不是showAll说明是收起状态就要添加ellpes类。
style中ellpes类的实现
.ellpes{
text-overflow:ellipsis;
overflow:hidden;
display:-webkit-box;
-webkit-line-clamp:3; /*这个数字是设置要显示省略号的行数*/
-webkit-box-orient:vertical;
}
网友评论