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 相关文章推荐
修复IE9&amp;safari 的sort方法
Oct 21 Javascript
js实时获取系统当前时间实例代码
Jun 28 Javascript
Jquery实现自定义tooltip示例代码
Feb 12 Javascript
jquery进行数组遍历如何跳出当前的each循环
Jun 05 Javascript
js操作css属性实现div层展开关闭效果的方法
May 11 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 Javascript
js动态生成Html元素实现Post操作(createElement)
Sep 14 Javascript
基于jquery实现无限级树形菜单
Mar 22 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
vue 设置路由的登录权限的方法
Jul 03 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
UCenter 批量添加用户的php代码
2012/07/17 PHP
PHP读取PDF内容配合Xpdf的使用
2012/11/24 PHP
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
PHP操作MySQL事务实例
2014/11/05 PHP
两种php去除二维数组的重复项方法
2015/11/04 PHP
浅谈PHP正则中的捕获组与非捕获组
2016/07/18 PHP
php表单处理操作
2017/11/16 PHP
PHP实现的解汉诺塔问题算法示例
2018/08/06 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
js操作二级联动实现代码
2010/07/27 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
2013/11/25 Javascript
javascript操作css属性
2013/12/30 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
Bootstrap模态框使用详解
2017/02/15 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
2017/10/24 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
Python实现控制台进度条功能
2016/01/04 Python
python爬取拉勾网职位数据的方法
2018/01/24 Python
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
python实现双人五子棋(终端版)
2020/12/30 Python
小学生红领巾广播稿
2014/01/21 职场文书
公益活动邀请函
2014/02/05 职场文书
大学自主招生自荐信范文
2014/02/26 职场文书
三八活动策划方案
2014/08/17 职场文书
知识就是力量演讲稿
2014/09/13 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
python 如何做一个识别率百分百的OCR
2021/05/29 Python
Java tomcat手动配置servlet详解
2021/11/27 Java/Android