vue实现排他功能 - 项目需求

先看原来的鸟样

我也不知道当时人家做的时候，是怎么想的，显示不了完整的，用省略号代替正常，但是人家想看详细信息，却死活点不开，是什么鬼？
所以 给我提了一个需求，就是点击详细信息，当前的展开，当点击下一个详细信息，上一条信息关闭，当前的展开，这…不就是排他效果吗？

1. 之所以内容显示两行，超出部分隐藏，是因为用了如下代码

      text-overflow:ellipsis;
      display:-webkit-box;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:2;

• -webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

• 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

• display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。

• -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

• text-overflow，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本

2. 那现在解决的问题就是，点击一条内容，展示详细信息
   首先需要一个点击事件，顺道传一个索引进去，为后面信息的唯一性做铺垫

 <div class="list" v-for="(inform, index) in informList" :key="index"  @click="add(index)">

初始化变量currentSort，将每循环的index的值，赋值给i

 data () {
      return {
        informList: [],
        content: false,
        currentSort: 0
      }
    },

  add (index) {
        this.currentSort = index
        this.content = !this.content
      }

3. 然后怎么做到展开当前信息，高度正好呢？ 其实只需要添加一个active(激活状态)，高度就不管了。随实际的大小变化

.right .content {
      font-size: 26rpx;
      color: #999999;
      font-weight: 400;
      overflow:hidden;
      text-overflow:ellipsis;
      display:-webkit-box;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:2;
      padding-bottom: 7rpx;
    }
     .content.active {  //点击了查看更多，就高度就不管了。随实际的大小变化
        height: auto;
        background: #fff;
        min-height: 160rpx;
        display: flex;
        padding-bottom: 8rpx;
    }

然后就是该判断，点击当前展开，其他关闭这个效果

<div class="content" :class="{ 'active:content':currentSort === index}">

现在的效果