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}">

現在的效果