Vue 文本超過三行展示省略號，並加上展開和收起的功能

場景：在vue項目中文本超過三行展示省略號，並加上展開和收起的功能

在處理多行文本時，經常會遇到各種各樣的需求，比如至多展示三行，多余的部分不展示並以省略號結尾；又比如在這個基礎上加上一個展開和收起的功能。同時UI的展示上還要求和文本本身的位置相對應。

具體實現思路如下：

　　1、判斷當前內容是否超過三行。此處可以給每行設置一個行高line-height,渲染完后超過三倍的行高即認為是內容超過了三行。

　　2、展示/收起狀態的切換可以通過data中的參數來綁定

　　3、在底部使用position:absolute來絕對定位展開該在的位置。

　　4、根據業務需求來設定好展開和收起按鈕需要呆的地方。

其中需要注意的點有

　　1、展開收起按鈕的高度和行高要和原來文本的行高一致，不然會導致樣式不統一。

　　2、獲取文本的高度時要注意使用this.$nextTick()來保證DOM渲染完成后再獲取高度

　　3、在不同場景下省略號可能不能夠完全遮住最后幾個字，可以通過調節空格，字體排布方式等辦法來調整，或者不要把展開和文本放在同一行，另起一行並且在末尾打開省略文本的樣式

下面是我在日常迭代中寫的一個比較簡單的三行展示省略號並帶有展開收起功能的小例子。歡迎大佬們指正~

先上具體實現代碼：

<template>
    <div class="content-wrap">
        <div :class="['content', expande ? 'expande' : 'close']" ref="content">
            思路：1、判斷當前內容是否超過三行。此處可以給每行設置一個行高line-height,渲染完后超過三倍的行高即認為是內容超過了三行。2、展示/收起狀態的切換可以通過data中的參數來綁定。3、在底部使用position:absolute來絕對定位展開該在的位置。4、根據業務需求來設定好展開和收起按鈕需要呆的地方。
        </div>
        <div
            class="expande-button-wrap"
            v-if="needShowExpande"
        >
            <div class="expande-button" @click="expandeClick" v-if="!expande">
                <span style="color: black">...</span> 展開
            </div>
            <div class="expande-button" @click="expandeClick" v-else>收起</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'App',
    data() {
        return {
            expande: true,
            needShowExpande: false,
        }
    },
    methods: {
        expandeClick() {
            console.log('expandeClick')
            this.expande = !this.expande
        },
    },
    mounted() {
        this.$nextTick(() => {
            let lineHeight = 22
            if (this.$refs.content.offsetHeight > lineHeight * 3) {
                this.expande = false
                this.needShowExpande = true
            } else {
                this.expande = true
            }
        })
    },
}
</script>

 

.expande {
  height: auto;
}
.close {
  height: 65px;
  overflow: hidden;
}