那些你不知道的 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

极光推送小结 - 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显示隐藏的…

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…

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

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

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

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

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

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

Perl的浅拷贝和深度拷贝

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

linux lvm 查看,Linux LVM 详解

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

智慧园区-楼宇建模技巧之【建楼篇】

一、国际惯例先上图 二、有什么用&#xff1f;用什么搞的&#xff1f;花了多久&#xff1f; 用途 室内定位(会议室、停车位查找等)安防监控(直接定位到某个楼道的摄像头拉取视频流)各种传感器数据三维可视化请问哪里可以买到呢(含笑半步癫2333) 我这里正好有一个。https://iot.…

asp.net core输出中文乱码的问题

原文:asp.net core输出中文乱码的问题 摘要 在学习asp.net core的时候&#xff0c;尝试在控制台&#xff0c;或者页面上输出中文&#xff0c;会出现乱码的问题。 问题重现 新建控制台和站点 public class Program{public static void Main(string[] args){ Console.W…

android oom工具,Android OOM-Heap,MAT工具检测内存泄露

概述在android的开发中&#xff0c;要时刻主要内存的分配和垃圾回收&#xff0c;因为系统为每一个dalvik虚拟机分配的内存是有限的&#xff0c;在google的G1中&#xff0c;分配的最大堆大小只有16M&#xff0c;后来的机器一般都为24M&#xff0c;实在是少的可怜。这样就需要我们…

windows 端微信多开

假设微信安装目录为 "E:\Program Files\WeChat\WeChat.exe" 打开记事本&#xff0c;复制一下命令&#xff0c;保存为 bat 文件 echo off start /d "E:\Program Files\WeChat\" WeChat.exe start /d "E:\Program Files\WeChat\" WeChat.exe exi…

超详细MFS网络分布式文件系统

-----------------------MFS---------------------- (1)分布式原理 分布式文件系统( Distributed File System)是指文件系统管理的物理存储资源不一定直接连接在本地节点上&#xff0c;而是通过计算机网络与节点相连。简单来说&#xff0c;就是把一些分散的(分布在局域网内各个…

markdown文件转word文件

工具&#xff1a; https://github.com/jgm/pandoc/releases/tag/2.2.3.2 下载pandoc安装包之后&#xff0c;像安装普通软件一样点开安装就可以了。安装完成之后&#xff0c;打开cmd命令行&#xff0c;输入pandoc -v&#xff0c;如果正常显示出类似下面的信息就表明安装成功&a…

android全面屏系统哪个版本开始,Android全面屏

所谓全面屏手机&#xff0c;就是屏幕纵横比大于1.86的设备。例如&#xff1a;举个例子.png官方文档&#xff1a;If your app targets Android 8.0 (API level 26) or higher, it fills the entire screen, according to its layout.If your app targets Android 7.1 (API level…

AliOS Things声源定位应用演示

摘要&#xff1a; 1. 概述 利用麦克风阵列进行声源定位在智能降噪、语音增强、语音识别等领域有广泛应用和研究前景。本文介绍基于AliOS Things STM32F413H Discovery开发板实现声源定位算法集成和功能演示。 概述利用麦克风阵列进行声源定位在智能降噪、语音增强、语音识别等…

Mysql 使用正则表达式

需求&#xff1a;匹配出姓名字段里非中文的 SELECT * FROM 表 WHERE REAL_NAME REGEXP ([\\u4e00-\\u9fa5]{1,20}|[a-zA-Z\\.\\s]{1,20}) ; 查询结果如下

2、Collections操作(自定义类)的各种实现

2019独角兽企业重金招聘Python工程师标准>>> 1、排序(sort) 要想实现排序&#xff0c;必须实现compare方法&#xff0c;这样Collection才知道是怎样的排序规则。普通的数据类型&#xff0c;比如&#xff1a;int 、String、long等都已经实现了Comparable接口&#xf…

android多接口请求参数,okhttp3 使用json参数post方式请求接口数据(android)

1. 谷歌自带的json不支持像map一样直接put字符串进去&#xff0c;所以先导入阿里的json包2. 创建json对象&#xff0c;并且放入所要请求的参数 //登录 private void loginRequest() { String url Contents.url"login"; JSONObject json new JSONObject(); json.put…