分类 前端技巧 下的文章

大屏可视化之组件层级设置


前言

最近在进行大屏可视化产品的技术调研,主要是调研 网易有数 和 datav

在组件层级排列这块,两者的实现是不一样的

  • datav:组件均在同级(z-index都是一样的),后定义的属于高层。调整层级就需要移动dom节点位置
  • 有数:根据z-index去设置,调整层级就需要调整自身z-index以及其他受影响的图表 z-index

通过分析vue上两者的实现,比较两者的优缺点


_前端-溢出文本显示省略号


需求

  1. 省略号除了在最后,也可能处于前面、中间,或者两边
  2. 双击文本进行复制的时候,拿到的是全部的文本(不带省略号)(对搜索引擎良好,因为所有文本保留)
  3. 自适应,宽度足够的话不显示省略号
  4. 支持多行文本


Antd Table组件 配置规范


前言

开发的时候遇到了这样的几个问题:

  1. 左侧菜单收缩时出现行不对齐
  2. 某列数据过长挤压其他列,导致显示不美观

官方文档讲的较为模糊,网上也没有相应的配置文章,width的设置也较为随意,故把一些经验和实践进行了记录。


web中的撤销重做技术


前言

撤销重做功能,我们经常在富文本编辑器中用到。正好最近接了一个思维导图组件,里面有用到这个功能,分享一波实现原理。

PM:"不就是按CTRL+Z CTRL+Y的事情吗,还需要开发?"


前端监听资源加载错误


前言

页面上有很多资源元素,比如<img>,<iframe>等,我们需要知道其加载情况,根据加载成功与否进行下一步的处理。

常见的做法是给这些元素上设置onload,onerror方法。

比如:<img onerror="errFn()" onload="loadFn()">

支持onload的标签:<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>

支持onerror的标签:<img>, <input type="image">, <object>, <script>, <style> , <audio>, <video>

注意IE9.0及以上才支持<audio>, <video>标签

此外几乎所有浏览器都支持onloadonerror,

这种做法的缺点:

  1. 每个要处理的元素都要绑定事件,html和js耦合太深,处理的脚本不能通用化、插件化,比如给另一个页面也能方便使用
  2. Windows 7 下的 Internet Explorer 11 不支持<audio>, <video>的 onerror 事件(我没试过。