VUE中实现长文本的展开和收起功能的三种方式

在VUE入门到放弃的时候，遇见了你，叫我实现长文本的展开和收起功能。经过不断的放弃过程，最后总结了三种方式实现。

1.利用VUE中的过滤器filter实现

过滤器的基本样式是这样的：

 filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

在代码里的文本处是这样的：

{{ message | capitalize }}

解释：message是代表你要格式化的文本变量，capitalize代表上过滤器代码中的名称，重点在于理解message是默认传入capitalize的第一个参数，当然，也就是说还可能有很多参数，也就是下文的value。

下面是具体过滤器的写法：

filters: {
  capitalize: function (value) {
    if (!value) return '';
    value = value.toString();
    If (value.length > 100) {
      Return value.substr(0,100);
    } else {
      Return value;
    }
  }

这样过滤器就会自动实现把你的文本按照过滤器里的格式显示出来，当然这是按照字数过滤。你也可以获取DOM渲染后的文本高度来过滤，可以用逼格很高的$nextTick，想了解的朋友可以访问：https://mp.csdn.net/postedit/100083017，不过这样显得太过麻烦，如果是按照高度的话，我们有更好的办法。

2.采用v-bind:class绑定css样式。

active }" class="card-mid">{{message}}

解释：这里的card-mid是原有的样式，v-bind:class里的expansion是转换后的样式。里面的active如果值为真的话，就会覆盖原有的样式，也就是说，展开的时候我们不限制元素的高度，将全部文本展示出来为样式一，收起的时候我们需要点击一下吧，就可以实现样式转换，显示固定高度的样式二。

3.放大招了，这个可以说是CSS的强大之处。

先看一段代码：

overflow: hidden;//超出部分影藏
-webkit-line-clamp: 4;//限制行数
text-overflow: ellipsis;//超过部分用省略号显示
display: -webkit-box;//盒子模型
-webkit-box-orient: vertical;//从顶部向底部垂直布置子元素

对，你没有看错，在2的基础上，我们不用设置固定高度，因为设置了固定高度可能会影响你的布局。在转换样式里expansion加入这些元素就可以了，灵活性非常的高，不会随浏览器缩小放大二改变，可谓是最佳选择，完整的是这样的：

active }" class="card-mid">{{message}}

//其他的属性可自行添加

.expansion{
  white-space:pre-line;
  width: 10.3rem;
  overflow: hidden;
  -webkit-line-clamp: 4;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  }

只因芳华无处落，你是人间四月天