那些你不知道的 getClientRects()

1.getClientRects()。是可以获取内联元素的内容有多少行

最近一个交互,在限定文字展现是5行,超过5行,则在后面添加。。。展开。如果没有展开二字,我们一般用css就能完成了。但是为了交互更人性化

text-overflow:
-o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;

来看看代码,是如何实现的,一定要弄一个默认的span来判断行数,得到5行嗯能显示什么文字。然后记录下来

 let txtDom = this.$refs.textContainer;txtDom.innerHTML = originalTxt; //第一次全部渲染let showtxtdom = originalTxt;let texLength = txtDom.getClientRects();let h = getLength(texLength);let tl = 0;if (h <= 5) {obj.unfoldFlag = false;} else {obj.unfoldFlag = true;}while (h > 5) {var step = 1;if (/<br\/>$/.test(showtxtdom)) {//回退的时候,如果碰到换行要整体替换step = 5;}showtxtdom = showtxtdom.slice(0, -step);//console.log(showtxtdom);txtDom.innerHTML =showtxtdom +'<span>...</span><span class="comm-item-content-spread-s">展开</span>';// console.log(txtDom.innerHTML);h = getLength(txtDom.getClientRects());tl += step;}obj.showTxt = showtxtdom;//点赞是否是已经默认的obj.statedefaut = item.state;obj.imgsrcselect ="http://img.58cdn.com.cn/chinahr/img/agree_ic_sel@3x.gif?" +new Date().getTime();let regroupdata = Object.assign({}, obj, item);return regroupdata;});// console.log(newlist);//this.$set(this.commentListdata.commentList, newlist);this.commentListArrObj = this.commentListArrObj.concat(newlist);this.commentListdata = communitydetailData.data;this.commentListdata.commentList = this.commentListArrObj;// console.log(this.commentListdata);return;}

2.getBoundingClientRect() 获取盒模型,元素的高度和定位,left +top.在vue里面经常遇到

Element.getBoundingClientRect().width =  border-left-width + padding-left + width + padding-right + border-right-widthElement.getBoundingClientRect().height =  border-top-width + padding-top + height + padding-bottom + border-bottom-width

3.$nextTick 的应用/nextTick:在下次 DOM 更新循环结束之后执行延迟回调。

  • 很多时候我们需要做到,动态算content的高度,就要手动减去头部+尾部的高度。我们需要等到数据加载完成之后,在做操作
  • 方法就是监听数据的变化,然后在监听里面做搞的元算

    watch: {commentListdata: function() {this.$nextTick(() => {//console.log("--nextTick--");this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;this.hasnowrapHeight = this.wrapperHeight - this.$refs.commmainwrap.getBoundingClientRect().height - this.$refs.commfootwrap.getBoundingClientRect().height;});}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/537796.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

idea统计代码行数

使用统计代码插件&#xff0c;可以统计代码行数。安装插件 Statistic。&#xff08;这个最好用&#xff09; File----settiing---plugins---browse repositories 重启idea后&#xff0c;底部会多一个 Statistic 点击刷新&#xff0c;行数就出来了。看最后的 Total

数据结构计算c语言数据步骤,数据结构C语言版视频教程-介绍各种最常用的数据结构 分析各种数据结构运算算法的实现过程-电脑网络视频-星火视频教程 21edu8.com...

这部数据结构C语言版视频教程结构清晰&#xff0c;实例丰富&#xff0c;具有很强的操作性和实用性。 它主要为大家介绍各种最常用的数据结构&#xff0c;以及从编程角度出发&#xff0c;分析各种数据结构运算算法的实现过程。数据结构是计算机存储、组织数据的方式。数据结构是…

极光推送小结 - iOS

此次即友盟分享小结(友盟分享小结 - iOS)之后对推送也进行了一版优化.此次分享内容依然基于已经成功集成 SDK 后 code 层级部分. 注:此次分享基于 SDK 3.1.0,若版本相差较大,仅供参考. 极光推送官方文档: https://docs.jiguang.cn/jpush/guideline/intro/ 首先,为分享单独创建了…

word去除所有的空行

申请软著时&#xff0c;需要复制源代码到word里。每行代码不能有换行&#xff0c;要紧凑的80页代码。每页要50~55行代码。 字体可设置为&#xff1a;宋体&#xff0c;5号&#xff0c;行间距固定值12。 演示实例 去除下面word代码里的空行 第一步&#xff1a; word显示隐藏的…

c语言Wndproc未定义,为什么我的老是未定义

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼这是源代码#includeLRESULT CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);int WINAPI WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance,PSTR szCmdLine, int iCmdShow){static TCHAR szAppName[] TEXT("HelloWin&qu…

spark on yarn

2019独角兽企业重金招聘Python工程师标准>>> spark on yarn 软件安装 当前环境 hadoop环境搭建参考&#xff1a;hadoop集群安装 hadoop2.6spark-2.2.0-bin-hadoop2.6.tgzscala-2.11.12安装scala tar -zxvf scala-2.11.12.tgz vi /etc/profile 添加以下内容 export S…

如何查看SQL Server2000执行过的SQL语句

SQLServer事件探查器可以完整记录SQL服务器执行过的SQL语句以及存储过程等 下面是SQLServer事件探查器的使用方法&#xff1a; 1. 打开SQL Server 企业管理器。 2. 从“工具”菜单选择“事件探查器”。 3. 当“事件探查器”主界面打开后&#xff0c;从“文件”菜单选择“新跟踪…

c语言链表不带头节点的排序,不带头结点的单向链表排序——插入排序(C语言)...

LinkList* LinkListInsertSort(LinkList* pHead){LinkList *pFirst (LinkList *)NULL; /* 原链表剩下未排序节点的头指针 */LinkList *pCurrInsert (LinkList *)NULL; /* 无序链表中当前待插入节点 */LinkList *pPrev (LinkList *)NULL; /* 有序链表中插入位置的前一个节点 …

免费字体

若不想字体版权有问题&#xff0c;可以参考以下几种完全免费的字体&#xff1a; 方正&#xff1a;方正黑体、方正书宋、方正仿宋、方正楷体 思源&#xff1a;思源黑体、思源柔黑体、思源宋体 站酷&#xff1a;站酷酷黑体、站酷高端黑体、站酷快乐体、站酷意大利体 。

【Python爬虫学习笔记12】Ajax数据爬取简介

有时候在我们设计利用requests抓取网页数据的时候&#xff0c;会发现所获得的结果可能与浏览器显示给我们的不一样&#xff1a;比如说有的信息我们通过浏览器可以显示&#xff0c;但一旦用requests却得不到想要的结果。这种现象是因为我们通过requests获得的都是HTML源文档&…

c语言的报告一,C语言实验报告(一).doc

C语言实验报告(一)C语言实验报告(一)一、实验目的掌握C语言中&#xff0c;基本的输入输出函数的使用方法。掌握printf中转义字符’\t’&#xff0c;’\n’的用法。掌握赋值语句的用法。掌握算术表达式、赋值表达式的计算。掌握数学函数的使用。二、实验内容从键盘输入一个6位整…

数据挖掘——相似文章推荐

相似文章推荐&#xff1a;在用户阅读某篇文章时&#xff0c;为用户推荐更多的与在读文章内容相类似的文章 相关概念&#xff1a; 推荐(Recommended)&#xff1a;指介绍好的人或事物&#xff0c;希望被任用或接受。数据挖掘领域&#xff0c;推荐包括相似推荐和协同过滤推荐。 相…

win10投影无法正常使用:我们正在确认此功能 解决方法

鼠标移动到开始按钮&#xff0c;右键----- windows powershell&#xff08;管理员&#xff09; 输入命令&#xff1a; netsh winsock reset 然后重启电脑&#xff0c;问题解决

青海师大c语言研究生专业课,2016年青海师范大学计算机应用技术C语言程序设计考研复试题库...

一、选择题1&#xff0e; 有如下程序:程序运行后的输出结果是( )。答:C【解析】题目中判断if 条件是否成立&#xff0c;后a 自增 得if 条件不成立执行else 函数体&#xff0c;输出F 。最后执行语句故C 选项正确。 按照格式输出2&#xff0e; 有如下程序&#xff1a;先取值为0, …

产品经理和项目经理的差别

原文地址&#xff1a;https://blog.csdn.net/verifocus/article/details/79219539 --------------------------------------------------------------------- 项目经理与产品经理的区别&#xff0c;用一句话概括就是&#xff1a;产品经理是做正确的事情&#xff0c;项目经理是…

c语言设计一个按时间片轮转法实现处理器调度的程序,设计一个按时间片轮转法实现处理器调度的程序...

实验一处理器调度一、实习内容选择一个调度算法&#xff0c;实现处理器调度。&#xff1b;二、实习目的在采用多道程序设计的系统中&#xff0c;往往有若干个进程同时处于就绪状态。当就绪进程个数大于处理器数时&#xff0c;就必须依照某种策略来决定哪些进程优先占用处理器。…

Perl的浅拷贝和深度拷贝

首先是深、浅拷贝的概念&#xff1a; 浅拷贝&#xff1a;shallow copy&#xff0c;只拷贝第一层的数据。Perl中赋值操作就是浅拷贝深拷贝&#xff1a;deep copy&#xff0c;递归拷贝所有层次的数据&#xff0c;Perl中Clone模块的clone方法&#xff0c;以及Storable的dclone()函…

程序员分析报告(2018)-总结篇

一、生活中的程序员 居住篇 在主要职业群体中&#xff0c;程序员更倾向于租房&#xff0c;20.9%的受访程序员目前自己有房&#xff0c;此比例明显低于其他职业。大概是因为程序员大部分还比较 年轻&#xff0c;传说中的超高薪水并不能让很多人拥有自己的房子而更长的工作…

linux lvm 查看,Linux LVM 详解

逻辑卷管理LVM是一个多才多艺的硬盘系统工具。无论在Linux或者其他类似的系统&#xff0c;都是非常的好用。传统分区使用固定大小分区&#xff0c;重新调整大小十分麻烦。但是&#xff0c;LVM可以创建和管理“逻辑”卷&#xff0c;而不是直接使用物理硬盘。可以让管理员弹性的管…

cnblogs修改网站图标icon

以下修改网络地址即可 <script type"text/javascript" language"javascript">//Setting ico for cnblogsvar linkObject document.createElement(link);linkObject.rel "shortcut icon";linkObject.href "icon的网络地址";do…