vue-展开收起按钮的实现

在仿豆瓣中有一个展开的小按钮,点击可以展开全部的内容介绍,不展开的话则只显示三行。

这里我是直接用一个控制添加多行省略的类来实现这个效果的。

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

}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容