You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

20 lines
931 B

1 year ago
# 隐藏与显示组件的冷门知识点
FineUI中组件`setVisible`方法采用的是`display:none`的形式隐藏组件.
优点大家都知道,不占据DOM流之类的.
但是缺点也很明显,多tab之类的组件,隐藏的元素无法获取宽高,这也是一些"组件缩成一坨"问题的直接原因
那么为什么不用`visibility:hidden`呢?
其实有个原因是input元素`focus`的特性导致
采用`visibility:hidden`形式隐藏组件,为了避免鼠标事件触发等,大多会附加一个超大的`top,left`样式,或者`translateX()`超大值,将其挪到屏幕外面
然而`focus`操作默认有个scrollToView特性,其会不受限制的自动跳到屏幕中间
![示例](../images/58.png)
例如决策平台的modern主题,开发者无法控制每个打开的tab里面是否会有代码逻辑触发`focus`,因此只能采用`display:none`的形式隐藏tab,否则就容易出现这种位置异常