vue實現移動端常見的文本展開收起功能

1.功能介紹

最近開發移動端項目遇到了這麼一個需求，就是列表中文本最多三行，超出部分省略，並顯示展開收起按鈕，若是文本沒有超出三行則不顯示展開收起按鈕，如圖：

2.需求分析

剛看到這個需求的時候第一個反應就是，怎麼判斷文本的高度是否已經超過三行？頁面剛加載的時候默認所有顯示，判斷若是高度超過某一個值就讓他隱藏？還沒寫就以爲不靠譜：

• 1.這是一個列表還有滾動加載，每次都去循環計算這些高度顯得不太優雅（主要實現起來也比較麻煩）；
• 2.頁面剛進來的時候所有顯示，判斷好之後再去隱藏，一兩條數據還好，數據量大的話極可能進來的時候頁面會閃一下

後來各類審查元素，各類修改html，終於發現了一個好辦法，那就是在div 中添加一個span 而後給div設置超出三行省略，這時候就能夠獲取到文本高度和div高度了，如圖：

這樣的話我只要在mounted中判斷這兩個高度就知道是否是應該展現展開收起按鈕了，後面的點擊事件什麼的都是浮雲，有了思路，那就簡單不少了。

3.代碼實現

其實還有一個小問題，那就是列表中這麼多數據，我怎麼一個一個的判斷呢？其實很是簡單，封裝成一個組件在組件中的mounted中判斷就行了。下面就是我封裝的組件代碼（複製黏貼改樣式就能夠用的那種代碼）

<template>
  <div class="text-box">
    <div :class="['txt', { 'over-hidden': !unfold }]" ref="textBox">
      <span ref="spanBox">{{content}}</span>
    </div>
    <div class="btn" v-if="ifOver" @click="unfold = !unfold">{{unfold ? '收起' : '展開'}}</div>
  </div>
</template>
<script>
export default {
  name: "text-box",
  data() {
    return {
      ifOver: false, // 文本是否超出三行，默認否
      unfold: false // 文本是不是展開狀態 默認爲收起
    };
  },
  props: {
    content: {
      type: String,
      default: ""
    }
  },
  mounted() {
    // 判斷是否顯示展開收起按鈕
    this.ifOver = this.$refs.spanBox.offsetHeight > this.$refs.textBox.offsetHeight
  }
};
</script>
<style scoped>
.txt {
  font-size: 16px;
  color: #333;
  margin-bottom: 5px;
}
.over-hidden {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.btn {
  color: red;
}
</style>
複製代碼

4.總結

這個功能仍是很常見的，可能好多前端程序員也遇到過這類需求，因此想着仍是分享出來。你們若是有更簡單或者更好的建議也能夠提出來，互相交流學習。^-^