美文网首页
vue-展开收起按钮的实现

vue-展开收起按钮的实现

作者: Cris娜娜 | 来源:发表于2018-11-27 17:48 被阅读0次

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

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

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

    }

    相关文章

      网友评论

          本文标题:vue-展开收起按钮的实现

          本文链接:https://www.haomeiwen.com/subject/bihnqqtx.html