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


Posted in Javascript onApril 28, 2019

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

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

需求

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

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

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

代码

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

<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>

演示动画

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

另一种思路

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
老生常谈combobox和combotree模糊查询
Apr 17 Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 Javascript
JavaScript基础之this详解
Jun 04 Javascript
基于JS实现html中placeholder属性提示文字效果示例
Apr 19 Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
微信小程序新手教程之启动页的重要性
Mar 03 Javascript
全面了解JavaScript的作用域链
Apr 03 Javascript
js实现点击按钮随机生成背景颜色
Sep 05 Javascript
使用webpack编译es6代码的方法步骤
Apr 28 #Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 #Javascript
详解微信小程序获取当前时间及日期的方法
Apr 28 #Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 #Javascript
如何在微信小程序里面退出小程序的方法
Apr 28 #Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
Apr 28 #Javascript
详解小程序退出页面时清除定时器
Apr 28 #Javascript
You might like
从零开始的异世界生活:第二季延期后,B站上架了第二部剧场版
2020/05/06 日漫
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
php准确获取文件MIME类型的方法
2015/06/17 PHP
PHP编程基本语法快速入门手册
2016/01/07 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
Script的加载方法小结
2011/01/12 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
bootstrap 表单验证使用方法
2017/01/11 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
JavaScript循环遍历你会用哪些之小结篇
2018/09/28 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
Python3实现计算两个数组的交集算法示例
2019/04/03 Python
django url到views参数传递的实例
2019/07/19 Python
Python Web程序搭建简单的Web服务器
2019/07/31 Python
python Shapely使用指南详解
2020/02/18 Python
Django认证系统user对象实现过程解析
2020/03/02 Python
jupyter notebook 实现matplotlib图动态刷新
2020/04/22 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
解决virtualenv -p python3 venv报错的问题
2021/02/05 Python
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
自动化职业生涯规划书范文
2014/01/03 职场文书
师范教师毕业鉴定
2014/01/13 职场文书
社团活动总结
2014/04/28 职场文书
传承焦裕禄精神思想汇报2014
2014/09/10 职场文书
谢师宴邀请函
2015/02/02 职场文书
重阳节慰问信
2015/02/15 职场文书
医德医风个人总结
2015/02/28 职场文书
python opencv通过4坐标剪裁图片
2021/06/05 Python
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers
解决 redis 无法远程连接
2022/05/15 Redis