Vue 中文本內(nèi)容超出規(guī)定行數(shù)后展開收起的處理
文字比較難解釋，直接看圖應該就懂是要做什么了。
image
需求
工作中遇到的，需求就是超過四行得有個展開按鈕，點擊展開顯示所有內(nèi)容，不超過四行的話就不需要這個按鈕并顯示所有內(nèi)容。
思路
- 首先得判斷文本自否超過四行，因為這些一般都是是前端異步請求然后后端發(fā)送過來，在組長的指導下，使用了 Vue 中的 nextTick 來監(jiān)聽 DOM 中是數(shù)據(jù)變化。
- 接下來主要是 css 上的思路，其實上圖可以分為兩部分，如下圖，標號1的部分展示前面三行，標號為2的部分會根據(jù)1的行數(shù)判斷縮進的大小，然后展示第四行。最后通過背景色的控制讓兩者看上去是一段文字。
image
代碼
核心代碼是中間那部分，其他的不用關注
<template>
<div>
<div style="text-align: center">{{title}}</div>
<div class="top-prove">為了證明樓下的那貨不會對我造成影響</div>
<div :class="showTotal ? 'total-introduce' : 'detailed-introduce'">
<div class="intro-content" :title="introduce" ref="desc">
<span class="merchant-desc" v-if="introduce">
{{introduce}}
</span>
<div class="unfold" @click="showTotalIntro" v-if="showExchangeButton">
<p>{{exchangeButton ? '展開' : '收起'}}</p>
</div>
</div>
</div>
<div class="bottom-prove">為了證明樓上的那貨不會對我造成影響</div>
<div class="change-buttom">
<div class="long" @click="tryLong">點這試試一段比較長的文字</div>
<div class="short" @click="tryShort">點這試試一段比較短的文字</div>
</div>
</div>
</template>
<script>
export default {
name: 'Spread',
data () {
return {
title: '演示展開收起',
introduce: '',
// 是否展示所有文本內(nèi)容
showTotal: true,
// 顯示展開還是收起
exchangeButton: true,
// 是否顯示展開收起按鈕
showExchangeButton: false,
rem: ''
};
},
mounted () {
this.init();
},
methods: {
showTotalIntro () {
console.log(this.showTotal);
this.showTotal = !this.showTotal;
this.exchangeButton = !this.exchangeButton;
},
getRem () {
console.log('getRem');
const defaultRem = 16;
let winWidth = window.innerWidth;
console.log('winWidth:' + winWidth);
let rem = winWidth / 375 * defaultRem;
return rem;
},
init () {
this.introduce = '擁有財富、名聲、權力，這世界上的一切的男人--哥爾·D·羅杰，在被行刑受死之前說了一句話，讓全世界的人都涌向了大海?！跋胍业膶毑貑?？如果想要的話，那就到海上去找吧，我全部都放在那里。”，世界開始迎接“大海賊時代”的來臨。擁有財富、名聲、權力，這世界上的一切的男人 “海賊王”哥爾·D·羅杰，在被行刑受死之前說了一句話，讓全世界的人都涌向了大海?！跋胍业膶毑貑?？如果想要的話，那就到海上去找吧，我全部都放在那里?！?，世界開始迎接“大海賊時代”的來臨。';
},
tryLong () {
let longIntroduce = 'Vue是一套用于構建用戶界面的漸進式框架。Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現(xiàn)代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅(qū)動。Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現(xiàn)代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅(qū)動。';
if (this.introduce !== longIntroduce) {
this.showExchangeButton = false;
this.showTotal = true;
this.introduce = longIntroduce;
}
},
tryShort () {
let shortIntroduce = 'Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架。';
if (this.introduce !== shortIntroduce) {
this.showExchangeButton = false;
this.showTotal = true;
this.introduce = shortIntroduce;
}
}
},
watch: {
'introduce': function () {
this.$nextTick(function () {
console.log('nextTick');
// 判斷介紹是否超過四行
let rem = parseFloat(this.getRem());
console.log('watch 中的rem', rem);
if (!this.$refs.desc) {
console.log('desc null');
return;
}
let descHeight = window.getComputedStyle(this.$refs.desc).height.replace('px', '');
console.log('descHeight:' + descHeight);
console.log('如果 descHeight 超過' + (5.25 * rem) + '就要顯示展開按鈕');
if (descHeight > 5.25 * rem) {
console.log('超過了四行');
// 顯示展開收起按鈕
this.showExchangeButton = true;
this.exchangeButton = true;
// 不是顯示所有
this.showTotal = false;
} else {
// 不顯示展開收起按鈕
this.showExchangeButton = false;
// 沒有超過四行就顯示所有
this.showTotal = true;
console.log('showExchangeButton', this.showExchangeButton);
console.log('showTotal', this.showTotal);
}
}.bind(this));
}
}
};
</script>
<style lang="less" scoped rel="stylesheet/less">
.top-prove {
height: 100px;
width: 100%;
background: #dddddd;
text-align: center;
line-height: 100px;
}
.total-introduce {
height: auto;
overflow: hidden;
font-size: 14px;
color: #434343;
margin: 10px;
.intro-content {
.merchant-desc {
width: 100%;
line-height: 21px;
}
}
.unfold {
display: block;
z-index: 11;
float: right;
width: 40px;
height: 21px;
p {
margin: 0;
line-height: 21px;
color: #7fbe87;
}
}
}
.detailed-introduce {
font-size: 14px;
color: #434343;
position: relative;
overflow: hidden;
margin: 10px;
.intro-content {
// 最大高度設為4倍的行間距
max-height: 84px;
line-height: 21px;
word-wrap: break-word;
/*強制打散字符*/
word-break: break-all;
background: #ffffff;
/*同背景色*/
color: #ffffff;
overflow: hidden;
.merchant-desc {
width: 100%;
line-height: 21px;
}
&:after,
// 這是展開前實際顯示的內(nèi)容
&:before {
content: attr(title);
position: absolute;
left: 0;
top: 0;
width: 100%;
color: #434343
// overflow: hidden;
}
// 把最后最后一行自身的上面三行遮住
&:before {
display: block;
overflow: hidden;
z-index: 1;
max-height: 63px;
background: #ffffff;
}
&:after {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
height: 81px;
/*截取行數(shù)*/
-webkit-line-clamp: 4;
text-overflow: ellipsis;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/*行首縮進字符數(shù)，值為[(截取行數(shù)-1)*尾部留空字符數(shù)]*/
text-indent: -12em;
/*尾部留空字符數(shù)*/
padding-right: 4em;
}
.unfold {
z-index: 11;
width: 40px;
height: 21px;
outline: 0;
position: absolute;
right: 0;
bottom: 0;
p {
margin: 0;
line-height: 21px;
color: #7fbe87;
}
}
}
}
.bottom-prove {
height: 100px;
width: 100%;
background: #dddddd;
text-align: center;
line-height: 100px;
}
.change-buttom {
font-size: 14px;
color: #2371be;
.long {
text-align: 21px;
text-align: center;
height: 21px;
}
.short {
text-align: 21px;
text-align: center;
height: 20px;
}
}
</style>
演示動畫
image
另一種思路
簡書中i_May的方法，思路有些不同，也可以參考下。
問題
- 工作中該頁面打包到測試環(huán)境在微信中打開后，三個省略號消失了，問題還在找，找到了會及時更新。
- 因為符號可能會在行尾出現(xiàn)點顯示問題，暫時還沒找到解決辦法，但出現(xiàn)概率較小，出現(xiàn)了也不影響。
