vue項目中判斷文字內容超出n行顯示詳情按鈕

兩行文本溢出顯示省略號的同時，還要添加一個詳情按鈕點擊查看全部的內容，如下圖：

 

 html內容：

　　<Row class="lh-64-r mb-20-r">
      <div class="d-i-b-v w-calc-240-r lh-32-r">
        <p class="two-line" ref="detailDom">{{ prjDetail || "-" }}</p>
      </div>
      <a v-if="showDetailBtn" class="d-i-b-b lh-32-r more-btn-unit fw-bold" @click="">詳情</a>
    </Row>

參數：

data() {
      return {
        prjDetail: “”,   // 詳情
        showDetailBtn: false,    // 是否顯示“詳情”按鈕
        detailDom: "", // 詳情dom
      }
    },

初始化及監聽：

    mounted() {
       // 判斷詳情是否溢出
        this.detailDom = this.$refs.detailDom;
        this.showDetailBtnFun();
        window.addEventListener('resize', this.showDetailBtnFun);
    },

判斷文本是否溢出方法：

       /**
       * 判斷文本是否溢出
       * 特殊：如果文字長度剛好達到某個臨界值，會出現不及時刷新出現按鈕的情況，解決方案：使用this.$nextTick強制刷新
       */
      showDetailBtnFun() {
          this.$nextTick(()=>{
              this.detailDom = this.$refs.detailDom;
              this.showDetailBtn = this.detailDom.clientHeight < this.detailDom.scrollHeight;
          })
      },

在請求數據接口后，調用this.showDetailBtnFun();即可刷新是否顯示詳情按鈕