简介

simply-ellipsis是纯原生技术实现的tooltip工具，具备以下功能

tooltip超出边界时自动调整其位置，保证提示框在视界内；
可配置单行是否超长才提示；
可配置多行提示；
可自定义提示内容；

在线预览 http://sichuan_meiyijia_industry_w327134.gitee.io/ellipsis/

gif展示

1.集成方式

原生

<link rel="stylesheet" href="ellipsis.css"/>
<script src="../dist/simply-ellipsis.js"></script>
<script>window.addEventListener('load',()=>{ellipsis.setEll()ellipsis.setObserver('app')})
</script>

在head引入example文件夹下的ellipsis.css
引入dist文件夹下的simply-ellipsis.js
调用ellipsis方法，传入id，指定监听的dom

具体可参考根目录下index.html中的使用方法，react、angler、vue等项目采用全局监听时均可采取该方式；

若采取手动维护的方式，即不执行setObserver监听的情况下，则需在组件生命周期勾子函数中，代表dom挂载完成的勾子函数中执行setEll方法，对于vue框架,则是在每个组件的mounted勾子函数中执行setEll。

VUE

//安装
npm i simply-ellipsis -S//main.js/ts中引入
import ellipsis from 'simply-ellipsis'
import 'simply-ellipsis/example/ellipsis.scss'// main.js中全局调用
window.addEventListener('load', () => {ellipsis.setEll()ellipsis.setObserver('app')
})

2.使用方式

框架集成到项目后，只需在需要省略提示的div中,使用示例中的class。目前有三类class，两个额外配置项。
三类class：

.ell-t、.ell-b、.ell-r、.ell-l
用于智能判断，文本超长时才提示，不超长时则不提示，元素本身需设置固定宽度，参考在线预览《2.演示单行文字超长情况下进行提示》；
.ell-a-t、.ell-a-b、.ell-a-r、.ell-a-l"
"a"代表always,即不管是否超长，均进行提示。参考在线预览《3.演示单行、多行无论是否超长均提示》；
.ell-m-t、.ell-m-b、.ell-m-r、.ell-m-l
m代表multiply,即应用于多行超长提示，该类class必须搭配–ell-line样式变量方可生效。参考在线预览《5.演示多行仅超长时进行提示》；

两个配置项：

ell-value
用于自定义toottip提示内容，可与上面三类class搭配。参考在线预览《4.演示单行、多行无论是否超长均提示》；
style=“–ell-line:行数”
搭配多行超长提示，用于设置多行文本行数。参考在线预览《3.演示单行、多行无论是否超长均提示》；

<!--单行超长提示-->
<div class="ell-t">ellipsis在顶部提示</div>
<!--多行超长提示，--ell-line指定行数-->
<div class="ell-m-t" style="--ell-line:3">ellipsis多行顶部提示,行数设置为3</div>
<!--无论是否超长均提示-->
<div class="ell-a-t">ellipsis在顶部提示</div>
<!--自定义提示内容-->
<div class="ell-t" ell-value="自定义内容">ellipsis在顶部提示</div>

3.自定义tooltip样式

可重写html下定义的样式变量来修改tooltip样式，目前只定义了以下变量。

html {--ell-max-width: 350px;/*重写背景色为红色*/--ell-background: red !important;--ell-font-size: 12px;--ell-padding: 10px;--ell-line-height: 1.2;--ell-color: #fff;--ell-border-radius: 4px;
}

4.Api说明

框架暴露了一个ellipsis的对象，该对象提供了两个方法，分别为setEll,setObserver

setEll介绍

该工具的核心方法，调用时会通过document.querySelectorAll方法查找所有应用了"ell-r,ell-l,ell-t,ell-b"Class类的dom元素，进行了以下三个步骤的计算。

 a.计算dom元素文本内容是否超长，若不超长，计算结束，不会出现tooltip提示效果b.计算tooltip是否超出对应方向的视图边界，如"ell-b"计算方向为视图底部，若超出视图底部，则将方向改为"ell-t"c.根据确定好的方向，计算出tooltip应用fixed定位后的left与top

setObserver

a. 该方法是一个MutationObserver的监听器，通过传入id,获取需要监听的dom,能够监听该dom及其子元素的dom节点删除和添加。

b. MutationObserver为原生api，只要防止MutationObserver回调函数的频繁执行，则无需担心性能，这点可以采用防抖函数解决，即MutationObserver的回调函数最好使用防抖函数包裹。
c. setObserver会开启MutationObserver监听，监听事件触发后，会通过防抖的方式调用setEll，防抖时间为1000ms。所以在某些极端情况下，dom处于不断创建删除的情况时，会导致tooltip的位置得到不更新。目前容易遇到的一种情况是，页面存在计时器时。原因在于采用innerHtml或者innerText的方式更新文字内容，实际上在更改text这个Node,会触发MutationObserver，解决方法见疑难解答。

d.看完上述所有描述，即可明白，重要的是setEll方法,setObserve是可用可不用的。setObserve只配置了观察dom节点变化，无法应对更为复杂的页面变化。在实际项目中，应根据实际情况选择，可以自己配置MutationObserver,也可在页面状态发生改变后，手动调用一次setEll。

5.版本更新记录

3.0.0

多行class名由".elln-方向"改为".ell-m-方向",仍兼容2.x用法；
新增不论是否超长均提示功能，class名为".ell-a-方向"；
新增自定义tooltip功能，在应用了class的元素中，设置自定义属性ell-value;

2.1.0

向现实妥协，放弃纯css的hover触发tooltip方式，采用dom的mouseover事件触发tooltip,解决上一版本需单独处理scroll与transform的情况;
最初的想法过于极端，一方面表现在希望使用时极简，靠一个class名搞定；二是在触发上也做到极简，不依赖于dom的mouseover监听事件,靠css的hover触发；以至于在实现过程中总是无法完美解决面临的所有情况，有了上面关于《fixed与absolution方案论述》
目前版本单行超长省略提示基本算ok了，下一步目标是实现多行超长省略提示

6.疑难解答

问：完全按照教程使用，大部分生效，部分不生效，主要是高德地图与百度地图的信息弹窗中使用不生效？

答：全局监听的方式没有监听style的变化，故对于通过style="display:none"来实现dom显隐时，不能自动触发setEll方法执行，在元素display更改后，手动执行一次setEll方法即可生效。
问完全按照教程全局引入方式使用，所有tooltip效果均不生效？

答：全局监听使用了防抖节约性能，若页面中存在持续的文本变化，如计时器，秒表，当前时间等随时间不断变化功能，会持续的触发setObserver，导致setEll始终无法执行，tooltip自然无法生效。具体触发原理在Api说明setObserver介绍中。解决方式为放弃框架双向绑定的方式来更新值，采用原生方式更新text节点的值，在线预览中当前时间采取了该方式

<div id="timer" class="f12">{{ time }}</div>//dom无初值时先赋初值，具有初值后，会有childNodes,更新时采取如下方式
setTime() {let nowTime = new Date()let date = moment(nowTime).format('YYYY年MM月DD日')let time = moment(nowTime).format('HH:mm:ss')if (!this.time) {this.time = date + '  ' + '  ' + time} else {this._dom.childNodes[0].data = date + '  ' + '  ' + time //重要，重要，重要}
}

simply-ellipsis简单易用，功能强大的tooltip工具相关推荐

java工作日报管理系统_GitHub - LovebuildJ/book-manager: JavaWeb图书管理系统，简单易用功能强大，可拓展性高，集成主流框架...
book-manager 介绍图书管理系统请勿忽略更新日志, 会有详细的版本更新说明! 软件截图在线API接口文档登录首页轮播图书列表图书上架图书编辑图书删除图书借阅图书检索图 ...
Redis-Lua语言：简单小巧但功能强大
Lua Lua语言是在1993年由巴西一个大学研究小组发明,其设计目标是作为嵌入式程序移植到其他应用程序,它是由C语言实现的,虽然简单小巧但是功能强大,所以许多应用都选用它作为脚本语言,尤其是在游戏领 ...
天猫php采集列表,QueryList: QueryList是一个基于phpQuery的通用列表采集类,是一个简单、灵活、强大的采集工具，采集任何复杂的页面基本上就一句话就能搞定了。...
#QueryList交流社区: http://querylist.cc/ #QueryList文档: http://doc.querylist.cc/ #QueryList交流QQ群:12326696 ...
简单易用线上引流测试工具：GoReplay
一. 引流测试产生背景日常大部分的测试工作都是在测试环境下,通过模拟用户的行为来对系统进行验证,包括功能以及性能.在这个过程中,你可能会遇到以下问题: 用户访问行为比较复杂,模拟很难和用户行为一致, ...
linux nc命令--功能强大的网络工具
linux nc命令--功能强大的网络工具 Socket长连接 AT指令测试,连接阿里云服务器 EC200S 4G CAT.1模块 nc命令简介 1)端口扫描 2) 远程拷贝文件 3) 简单聊天工具 ...
Linux 上功能强大的网络工具 tcpdump 详解
tcpdump 是用于捕获传入和传出流量的网络实用程序.这是您需要了解的有关在 Linux 上使用 tcpdump 的所有信息. Linux 配备了大量的网络实用程序可供选择.tcpdump 是一种功 ...
WinMount是一款国产免费且功能强大Windows小工具，具备压缩解压和虚拟光驱（CD/DVD）的双重功能...
http://cn.winmount.com/index.html WinMount是一款国产免费且功能强大Windows小工具,具备压缩解压和虚拟光驱(CD/DVD)的双重功能.最大特色在于压缩包虚 ...
IDM(功能强大的下载工具)IDM可以批量下载视频吗？
IDM是指Internet Download Manager,是一款功能强大的下载工具软件.它可以加速下载速度,支持断点续传,还可以自动捕捉下载链接,方便用户进行下载管理.同时,IDM还支持多任务下载 ...
功能强大的串口工具：GhostyComm 4.0（万能通讯精灵）
功能强大的串口工具:GhostyComm 4.0(万能通讯精灵) 本软件是本人在2002初从事单片机开发工作时为了方便调试而编写的,当时是win 98版本.2003年才开发win xp版本.直到200 ...

simply-ellipsis简单易用，功能强大的tooltip工具

简介

1.集成方式

原生

具体可参考根目录下index.html中的使用方法，react、angler、vue等项目采用全局监听时均可采取该方式；

若采取手动维护的方式，即不执行setObserver监听的情况下，则需在组件生命周期勾子函数中，代表dom挂载完成的勾子函数中执行setEll方法，对于vue框架,则是在每个组件的mounted勾子函数中执行setEll。

VUE

2.使用方式

3.自定义tooltip样式

4.Api说明

5.版本更新记录

6.疑难解答

答：全局监听的方式没有监听style的变化，故对于通过style="display:none"来实现dom显隐时，不能自动触发setEll方法执行，在元素display更改后，手动执行一次setEll方法即可生效。

simply-ellipsis简单易用，功能强大的tooltip工具相关推荐

最新文章

热门文章