Vue 中文本内容超出规定行数后展开收起的处理的实现方法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Vue 中文本内容超出规定行数后展开收起的处理的实现方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6095字，纯文字阅读大概需要9分钟。

内容图文

文字比较难解释，直接看图应该就懂是要做什么了。

需求

工作中遇到的，需求就是超过四行得有个展开按钮，点击展开显示所有内容，不超过四行的话就不需要这个按钮并显示所有内容。

思路首先得判断文本自否超过四行，因为这些一般都是是前端异步请求然后后端发送过来，在组长的指导下，使用了 Vue 中的 nextTick 来监听 DOM 中是数据变化。接下来主要是 css 上的思路，其实上图可以分为两部分，如下图，标号1的部分展示前面三行，标号为2的部分会根据1的行数判断缩进的大小，然后展示第四行。最后通过背景色的控制让两者看上去是一段文字。

代码

核心代码是中间那部分，其他的不用关注

<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: '',
  // 是否展示所有文本内容
  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 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。';
  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,
  // 这是展开前实际显示的内容
  &: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;
  /*截取行数*/
  -webkit-line-clamp: 4;
  text-overflow: ellipsis;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /*行首缩进字符数，值为[(截取行数-1)*尾部留空字符数]*/
  text-indent: -12em;
  /*尾部留空字符数*/
  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>

演示动画

另一种思路

简书中i_May的方法，思路有些不同，也可以参考下。

问题工作中该页面打包到测试环境在微信中打开后，三个省略号消失了，问题还在找，找到了会及时更新。因为符号可能会在行尾出现点显示问题，暂时还没找到解决办法，但出现概率较小，出现了也不影响。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的Vue 中文本内容超出规定行数后展开收起的处理的实现方法全部内容，希望文章能够帮你解决Vue 中文本内容超出规定行数后展开收起的处理的实现方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---