Vue 中文本內(nèi)容超出規(guī)定行數(shù)后展開收起的處理的實現(xiàn)方法

更新時間：2019年04月28日 09:57:18 作者：Ethanzyc

這篇文章主要介紹了Vue 中文本內(nèi)容超出規(guī)定行數(shù)后展開收起的處理的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

文字比較難解釋，直接看圖應(yīng)該就懂是要做什么了。

需求

工作中遇到的，需求就是超過四行得有個展開按鈕，點擊展開顯示所有內(nèi)容，不超過四行的話就不需要這個按鈕并顯示所有內(nèi)容。

思路首先得判斷文本自否超過四行，因為這些一般都是是前端異步請求然后后端發(fā)送過來，在組長的指導(dǎo)下，使用了 Vue 中的 nextTick 來監(jiān)聽 DOM 中是數(shù)據(jù)變化。接下來主要是 css 上的思路，其實上圖可以分為兩部分，如下圖，標(biāo)號1的部分展示前面三行，標(biāo)號為2的部分會根據(jù)1的行數(shù)判斷縮進的大小，然后展示第四行。最后通過背景色的控制讓兩者看上去是一段文字。

代碼

核心代碼是中間那部分，其他的不用關(guān)注

<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 = '擁有財富、名聲、權(quán)力，這世界上的一切的男人--哥爾·D·羅杰，在被行刑受死之前說了一句話，讓全世界的人都涌向了大海?！跋胍业膶毑貑?？如果想要的話，那就到海上去找吧，我全部都放在那里?！?，世界開始迎接“大海賊時代”的來臨。擁有財富、名聲、權(quán)力，這世界上的一切的男人 “海賊王”哥爾·D·羅杰，在被行刑受死之前說了一句話，讓全世界的人都涌向了大海?！跋胍业膶毑貑幔咳绻胍脑?，那就到海上去找吧，我全部都放在那里?！?，世界開始迎接“大海賊時代”的來臨。';
 },
 tryLong () {
  let longIntroduce = 'Vue是一套用于構(gòu)建用戶界面的漸進式框架。Vue 被設(shè)計為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時，Vue 也完全能夠為復(fù)雜的單頁應(yīng)用提供驅(qū)動。Vue (讀音 /vjuː/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設(shè)計為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時，Vue 也完全能夠為復(fù)雜的單頁應(yīng)用提供驅(qū)動。';
  if (this.introduce !== longIntroduce) {
  this.showExchangeButton = false;
  this.showTotal = true;
  this.introduce = longIntroduce;
  }
 },
 tryShort () {
  let shortIntroduce = 'Vue (讀音 /vjuː/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進式框架。';
  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 {
  // 最大高度設(shè)為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>

演示動畫