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