場景：在vue項目中文本超過三行展示省略號，并加上展開和收起的功能
在處理多行文本時威兜，經(jīng)常會遇到各種各樣的需求销斟，比如至多展示三行，多余的部分不展示并以省略號結(jié)尾椒舵；又比如在這個基礎(chǔ)上加上一個展開和收起的功能蚂踊。同時UI的展示上還要求和文本本身的位置相對應(yīng)斜做。
具體實現(xiàn)思路如下：
1箭启、判斷當前內(nèi)容是否超過三行知市。此處可以給每行設(shè)置一個行高line-height,渲染完后超過三倍的行高即認為是內(nèi)容超過了三行蟹瘾。
2撵枢、展示/收起狀態(tài)的切換可以通過data中的參數(shù)來綁定
3择份、在底部使用position:absolute來絕對定位展開該在的位置狸吞。
4胆描、根據(jù)業(yè)務(wù)需求來設(shè)定好展開和收起按鈕需要呆的地方炬灭。
其中需要注意的點有
展開收起按鈕的高度和行高要和原來文本的行高一致醋粟，不然會導(dǎo)致樣式不統(tǒng)一。
獲取文本的高度時要注意使用
this.$nextTick()來保證DOM渲染完成后再獲取高度在不同場景下省略號可能不能夠完全遮住最后幾個字重归，可以通過調(diào)節(jié)空格米愿，字體排布方式等辦法來調(diào)整，或者不要把展開和文本放在同一行鼻吮，另起一行并且在末尾打開省略文本的樣式
下面是我在日常迭代中寫的一個比較簡單的三行展示省略號并帶有展開收起功能的小例子育苟。歡迎大佬們指正~
先上具體實現(xiàn)代碼：
DOM
<template>
<div class="content-wrap">
<div :class="['content', expande ? 'expande' : 'close']" ref="content">
思路：1、判斷當前內(nèi)容是否超過三行椎木。此處可以給每行設(shè)置一個行高line-height,渲染完后超過三倍的行高即認為是內(nèi)容超過了三行宙搬。2笨腥、展示/收起狀態(tài)的切換可以通過data中的參數(shù)來綁定。3勇垛、在底部使用position:absolute來絕對定位展開該在的位置脖母。4、根據(jù)業(yè)務(wù)需求來設(shè)定好展開和收起按鈕需要呆的地方闲孤。
</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>
Style
<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>
Script
<style >
.content {
font-size: 14px;
color: black;
letter-spacing: 0;
line-height: 22px;
text-align: justify;
overflow: hidden;
/* display: -webkit-box; */
/* -webkit-line-clamp: 3;
-webkit-box-orient: vertical; */
/* text-overflow: ellipsis; */
}
.expande {
overflow: auto;
height: auto;
padding-bottom: 22px;
}
.close {
overflow: hidden;
height: 66px;
padding-bottom: 0;
}
.expande-button-wrap {
position: absolute;
bottom: 0;
right: 0;
height: 22px;
background: white;
}
.expande-button {
text-align: right;
vertical-align: middle;
color: #5995ef;
font-size: 14px;
line-height: 22px;
}
</style>
