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 相关文章推荐
jquery $.each()使用探讨
Sep 23 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
在JavaScript中处理数组之reverse()方法的使用
Jun 09 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 Javascript
jquery密码强度校验
Dec 02 Javascript
JS遍历数组及打印数组实例分析
Jan 21 Javascript
AngularJS学习笔记之依赖注入详解
May 16 Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 Javascript
React操作真实DOM实现动态吸底部的示例
Oct 23 Javascript
利用nginx + node在阿里云部署https的步骤详解
Dec 19 Javascript
layui 监听select选择 获取当前select的ID名称方法
Sep 24 Javascript
JavaScript控制台的更多功能
Apr 28 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
跟我学Laravel之配置Laravel
2014/10/15 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
PHP使用header()输出图片缓存实例
2014/12/09 PHP
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
用js做一个小游戏平台 (一)
2009/12/29 Javascript
js获取通过ajax返回的map型的JSONArray的方法
2014/01/09 Javascript
自己编写的支持Ajax验证的JS表单验证插件
2015/05/15 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
微信小程序滑动选择器的实现代码
2018/08/10 Javascript
vue-router的使用方法及含参数的配置方法
2018/11/13 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
Python import用法以及与from...import的区别
2015/05/28 Python
python 类详解及简单实例
2017/03/24 Python
python随机数分布random测试
2018/08/27 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
详解Python的循环结构知识点
2019/05/20 Python
python实现画出e指数函数的图像
2019/11/21 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
超市营业员岗位职责
2013/12/20 职场文书
大学活动策划书范文
2014/01/10 职场文书
房地产促销活动方案
2014/03/01 职场文书
起诉意见书范文
2015/05/19 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书
你真的了解PHP中的引用符号(&)吗
2021/05/12 PHP
详解如何使用Nginx解决跨域问题
2022/05/06 Servers