隐藏与显示组件的冷门知识点

FineUI中组件setVisible方法采用的是display:none的形式隐藏组件.

优点大家都知道,不占据DOM流之类的.

但是缺点也很明显,多tab之类的组件,隐藏的元素无法获取宽高,这也是一些"组件缩成一坨"问题的直接原因

那么为什么不用visibility:hidden呢?

其实有个原因是input元素focus的特性导致

采用visibility:hidden形式隐藏组件,为了避免鼠标事件触发等,大多会附加一个超大的top,left样式,或者translateX()超大值,将其挪到屏幕外面

然而focus操作默认有个scrollToView特性,其会不受限制的自动跳到屏幕中间

例如决策平台的modern主题,开发者无法控制每个打开的tab里面是否会有代码逻辑触发focus,因此只能采用display:none的形式隐藏tab,否则就容易出现这种位置异常