update

README.md

@@ -14,35 +14,36 @@ FineUI 100个问题题,带你走进FineUI的世界
 
 ### 基础必备知识
 
-- [0、前端工作进阶需要哪些必备技能](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/0.前端工作进阶需要哪些必备技能.md)
+- [0、前端工作进阶需要哪些必备技能](./questions/0.前端工作进阶需要哪些必备技能.md)
-- [1、前端如何正确书写资源路径](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/50.前端如何正确书写资源路径.md)
+- [1、前端如何正确书写资源路径](./questions/50.前端如何正确书写资源路径.md)
-- [2、组件的代码设计基本思路](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/2.组件的代码设计基本思路.md)
+- [2、组件的代码设计基本思路](./questions/2.组件的代码设计基本思路.md)
-- [3、如何获取当前时间](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/1.如何获取当前时间.md)
+- [3、如何获取当前时间](./questions/1.如何获取当前时间.md)
 - [4、结合语义化、可读性和程序性能选择遍历方法](./questions/4.结合语义化、可读性和程序性能选择遍历方法.md)
-- [5、关于组件引用的奥秘,ref知多少](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/3.关于组件引用的奥秘,ref知多少.md)
+- [5、关于组件引用的奥秘,ref知多少](./questions/3.关于组件引用的奥秘,ref知多少.md)
-- [6、使用ButtonGroup控制可点击组件的控制选中状态](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/4.使用ButtonGroup控制可点击组件的控制选中状态.md)
+- [6、使用ButtonGroup控制可点击组件的控制选中状态](./questions/4.使用ButtonGroup控制可点击组件的控制选中状态.md)
-- [7、我们为什么要设计el这个属性](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/40.我们为什么要设计el这个属性.md)
+- [7、我们为什么要设计el这个属性](./questions/40.我们为什么要设计el这个属性.md)
 - [9、z-index解析以及在FineUI中使用原则](./questions/9.z-index解析以及在FineUI中使用原则.md)
-- [10、computed通俗易懂的原理解析和日常排错](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/1.如何获取当前时间.md)
+- [10、computed通俗易懂的原理解析和日常排错](./questions/1.如何获取当前时间.md)
-- [11、绝对布局的隐藏知识点](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/41.绝对布局的隐藏知识点.md)
+- [11、绝对布局的隐藏知识点](./questions/41.绝对布局的隐藏知识点.md)
-- [12、如何灵活应用布局组件,尽可能的减少DOM数量?](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/41.绝对布局的隐藏知识点.md)
+- [12、如何灵活应用布局组件,尽可能的减少DOM数量?](./questions/41.绝对布局的隐藏知识点.md)
-- [13、何时会滚动,滚动条位置如何贴边,究竟是怎么回事](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/42.何时会滚动,滚动条位置如何贴边,究竟是怎么回事.md)
+- [13、何时会滚动,滚动条位置如何贴边,究竟是怎么回事](./questions/42.何时会滚动,滚动条位置如何贴边,究竟是怎么回事.md)
 - [14、如何监听元素大小变化](./questions/20.如何监听元素大小变化.md)
+- [15、阻止冒泡在FineUI中适用场景](./questions/15.阻止冒泡在FineUI中适用场景.md)
 
 ### 进阶技巧
 
-- [1、Fix中对于对象属性的监听,为什么要先定义属性才可以正常watch,如何解决](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/55.Fix中对于对象属性的监听,为什么要先定义属性才可以正常watch,如何解决.md)
+- [1、Fix中对于对象属性的监听,为什么要先定义属性才可以正常watch,如何解决](./questions/55.Fix中对于对象属性的监听,为什么要先定义属性才可以正常watch,如何解决.md)
-- [2、高阶组件的render-props](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/4.高阶组件的render-props.md)
+- [2、高阶组件的render-props](./questions/4.高阶组件的render-props.md)
 - [3、在props中处理生命周期函数](./questions/11.在props中处理生命周期函数.md)
-- [4、为什么传递时间信息时候推荐使用时间戳](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/3.为什么传递时间信息时候推荐使用时间戳.md)
+- [4、为什么传递时间信息时候推荐使用时间戳](./questions/3.为什么传递时间信息时候推荐使用时间戳.md)
-- [5、BI.config都可以做那些事情](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/9.BI.config都可以做那些事情.md)
+- [5、BI.config都可以做那些事情](./questions/9.BI.config都可以做那些事情.md)
-- [6、BI.config的执行顺序是什么,为什么这么设计](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/10.BI.config的执行顺序是什么,为什么这么设计.md)
+- [6、BI.config的执行顺序是什么,为什么这么设计](./questions/10.BI.config的执行顺序是什么,为什么这么设计.md)
-- [7、combo的一些特性详解](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/80.combo的一些特性详解.md)
+- [7、combo的一些特性详解](./questions/80.combo的一些特性详解.md)
-- [8、利用响应式编写组件代码的新思路](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/43.利用响应式编写组件代码的新思路.md)
+- [8、利用响应式编写组件代码的新思路](./questions/43.利用响应式编写组件代码的新思路.md)
-- [9、如何提供异步配置的接口](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/44.如何提供异步配置的接口.md)
+- [9、如何提供异步配置的接口](./questions/44.如何提供异步配置的接口.md)
 - [10、Fix.set和Fix.del是为了解决什么问题?](./questions/10.Fix.set和Fix.del是为了解决什么问题.md)
 - [11、Fix中对数组、对象的操作技巧](./questions/11.Fix中对数组、对象的操作技巧.md)
-- [12、computed进行列表组件的状态控制](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/21.computed%E8%BF%9B%E8%A1%8C%E5%88%97%E8%A1%A8%E7%BB%84%E4%BB%B6%E7%9A%84%E7%8A%B6%E6%80%81%E6%8E%A7%E5%88%B6.md)
+- [12、computed进行列表组件的状态控制](./questions/21.computed%E8%BF%9B%E8%A1%8C%E5%88%97%E8%A1%A8%E7%BB%84%E4%BB%B6%E7%9A%84%E7%8A%B6%E6%80%81%E6%8E%A7%E5%88%B6.md)
 - [13、如何在开发中有效减少dom数量]()
 - [14、怎么实现一个树形控件]()
 - [15、disabled的父子控制]()
@@ -50,10 +51,10 @@ FineUI 100个问题题,带你走进FineUI的世界
 - [17、处理树结构的常用算法]()
 - [18、组件生命周期与Model状态控制](https://code.fineres.com/projects/BUSSINESS/repos/nuclear-webui/pull-requests/9193/diff/#packages/bi-webui/src/modules/conf/pack/analysis/transfer/operator/dimension/combo/combo.tsx)
 - [19、让滚动条贴附在容器边缘的实现](./questions/28.让滚动条贴附在容器边缘的实现.md)
-- [20、BI.Layers.create参数详解原理](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/29.BI.Layers.create参数详解原理.md)
+- [20、BI.Layers.create参数详解原理](./questions/29.BI.Layers.create参数详解原理.md)
 - [21、上对齐的横向布局](./questions/27.上对齐的横向布局.md)
 - [22、tab选项卡组件的logic属性实现动态高度](./questions/26.tab选项卡组件的logic属性实现动态高度.md)
-- [23、为什么FineUI中采用display:none隐藏组件](./questions/26.tab选项卡组件的logic属性实现动态高度.md)
+- [23、为什么FineUI中采用display:none隐藏组件]()
 - [24、选中、hover样式的通用处理规则](./questions/26.tab选项卡组件的logic属性实现动态高度.md)
 - [25、如何独立控制组件文字和图标颜色](./questions/34.独立控制组件文字和图标颜色.md)
 - [26、文件上传控件多次选择文件和自定义校验](./questions/35.文件上传控件多次选择文件和自定义校验.md)
@@ -63,10 +64,12 @@ FineUI 100个问题题,带你走进FineUI的世界
 - [30、空状态提示的若干种实现方式]()
 - [31、在响应式中谨慎使用解构](./questions/31.响应式中谨慎使用解构.md)
 - [32、有没有一种布局方式，在文本保持垂直居中的情况下，文本很多时，可以限制其不超出外层高度 并出现滚动条](./questions/32.有没有一种布局方式，在文本保持垂直居中的情况下，文本很多时，可以限制其不超出外层高度 并出现滚动条.md)
-- [33、如何快速的封装自定义combo]()
+- [33、如何快速的封装自定义combo](./questions/33.如何快速的封装自定义combo.md)
 - [34、horizontalAlign:stretch是怎么一回事儿]()
 - [35、不用resize实现拖动调整宽高布局]()
 - [36、reset方法的滥用]()
+- [37、hover-visible的原理及使用方式.md](./questions/37.hover-visible的原理及使用方式.md)
+- [38、绑定listeners时候this的新写法.md](./questions/38.绑定listeners时候this的新写法.md)
 
 
 ### 代码之外

questions/15.阻止冒泡在FineUI中适用场景.md

@@ -0,0 +1,17 @@
+# 阻止冒泡在FineUI中适用场景
+
+FineUI中Button,Combo等组件支持stopPropagation属性,顾名思义,作用是阻止冒泡的,那么具体哪些场景适用于阻止冒泡呢?
+
+![示例](../images/47.png)
+
+在外部组件可点击的情况下,内部包含独立可点击的组件
+
+常见的自定义列表及树状节点,节点自身支持点击选中,同时节点的展开收起箭头以及右侧的更短选项图标按钮点击的时候不需要触发节点的选中.
+这种情况下就轮到stopPropagation上场了. 例如阻止了展开收起箭头的冒泡,此时点击展开收起箭头只会触发树节点的展开收起,不会触发点击
+
+阻止冒泡无须滥用,仅在明确意识到需要使用的时候方可使用.
+
+阻止冒泡会带来些许副作用,这些作为已知现象并不需要刻意解决
+
+例如可以拖动的组件,拖动过程中,在stopPropagation的元素上松开鼠标,会导致拖动状态不能正常结束.
+

questions/33.如何快速的封装自定义combo.md

@@ -0,0 +1,63 @@
+# 如何快速的封装自定义combo
+
+FineUI中提供了很多下拉框组件,但总有时候不满足使用场景,需要自己封装
+
+那么如何快速封装一个combo组件呢?总结多年的经验,分如下几个步骤
+
+## 1.确定好el和popup
+
+想好触发器和展开面板显示的内容.举个常见的例子,一个水平布局,包含一个文字和一个图标组成了el,一个button组成了面板
+
+```javascript
+const combo = {
+    type: "bi.combo",
+    el: {
+        type: "bi.horizontal_fill",
+        columnSize: ['fill', 24],
+        items: [
+            {
+                type: "bi.label",
+                text: "我是el"
+            }, {
+                type: "bi.icon_label",
+                text: "我是el上的图标"
+            }
+        ]
+    },
+    popup: {
+        el: {
+            type: "bi.button",
+            text: "请点击"
+        }
+    }
+};
+```
+
+## 2.确定好触发方式
+
+根据交互需要,确定好需要点击触发,还是鼠标悬浮触发,选择一个合适的`trigger`属性
+
+## 3.确定好收起面板的控制逻辑
+
+多数时候,我们需要在弹出面板进行操作之后收起面板,这时候需要手动监听事件调用`hideView`方法
+
+```javascript
+let comboRef;
+const combo = {
+    type: "bi.combo",
+    ref: ref => comboRef = ref,
+    popup: {
+        el: {
+            type: "bi.button",
+            text: "请点击",
+            handler: () => {
+                comboRef.hideView()
+            }
+        }
+    }
+};
+```
+
+## 4.完善好设置值和获取值逻辑
+
+在[combo特性详解中](./80.combo的一些特性详解.md)阐述了combo的特性,可以参考

questions/35.文件上传控件多次选择文件和自定义校验.md

@@ -0,0 +1,34 @@
+# 文件上传控件多次选择文件和自定义校验
+
+在使用FineUI中上传文件控件的时候,如果想要自定义文件校验规则怎么办呢?
+
+```javascript
+const file = {
+    type: "bi.file",
+    multiple: true,
+    accept: ".png,.pdf,image/jpg,image/*",
+    maxSize: 1024 * 1024, // 最大文件大小
+    maxLength: 3, // 最大文件个数
+    errorText: function (error) {
+        return "上传失败啦";
+    },
+    listeners: [{
+        eventName: "EVENT_CHANGE",
+        action: function (obj) {
+            // 可以对文件进行处理及判断
+            const files = obj.files;
+            const invalid = files.some(file => {
+                if (/image/.test(file.type) && file.size > 1024 * 10) {
+                    BI.Msg.toast(`${file.type}类型文件不允许超过10KB`, { level: "error" });
+                    return true;
+                }
+            });
+            // 可选的是否清空掉上次上传的内容
+            file.reset();
+            !invalid && file.upload();
+        }
+    }]
+};
+```
+
+file组件在选择文件后,会触发`EVENT_CHANGE`事件,对外抛出的参数包含所选文件列表,我们可以对这些内容进行筛选处理,进行自定义校验等操作

questions/37.hover-visible的原理及使用方式.md

@@ -0,0 +1,96 @@
+# hover-visible的原理及使用方式
+
+常见的交互场景,某个元素在一般情况下隐藏,当鼠标悬浮到父元素上之后,该元素显示
+
+![示例](../images/48.gif)
+
+FineUI中提供了两种方式实现这种效果,分开举例
+
+#  less .hover-visible() mixin
+
+## 源码分析
+
+利用less强大的混合功能,默认状态`visibility:hidden`,在父级容器hover时状态变成`visibility:visible`
+
+```less
+.hover-visible(@cls) {
+  & .@{cls} {
+    visibility: hidden;
+  }
+  &:hover {
+    & .@{cls} {
+      visibility: visible;
+    }
+  }
+}
+```
+
+## 应用示例
+
+在编写less代码时,只需要在对应父级class下面加入`.hover-visible()`mixin即可
+
+```less
+.my-demo {
+  .hover-visible(add-button);
+}
+```
+
+编译为css
+```css
+.my-demo .add-button {
+  visibility: hidden;
+}
+.my-demo:hover .add-button {
+  visibility: visible;
+}
+```
+
+## .hover-visible有什么缺陷吗?
+
+众所周知,`visibility:hidden`仅仅隐藏了元素,但依旧占据文档流位置的,入下图所示,这样白白浪费了节点右侧可以利用的空间,体验不好.
+
+![示例](../images/46.png)
+
+为了应对这种非常常见的场景,FineUI提供了一套样式方案:
+
+# .hover-visible-container .hover-visible-item
+
+兄弟搭配,其力断金.一套class类名组合,提升编码效率.
+
+## 源码分析
+
+首先,基于`visibility:hidden`的不足,我们期望元素隐藏时能够`display:none`,父级元素hover时正常显示出来.
+
+借助css3 `:where`和`:not`伪类,我们巧妙的实现了这一功能
+
+```less
+.bi-hover-visible-container {
+
+  & .bi-hover-visible-item {
+    visibility: hidden;
+  }
+
+  &:hover .bi-hover-visible-item {
+    visibility: visible;
+  }
+  
+  &:where(:not(&:hover)) .bi-hover-visible-item {
+    display: none;
+  }
+}
+```
+
+用通俗语音解释,前两天规则很容易理解:默认状态`bi-hover-visible-item`隐藏,父节点hover时`bi-hover-visible-item`显示
+最后一条是什么含义呢?
+当父节点`bi-hover-visible-container`没被hover的时候,子节点`bi-hover-visible-item`的样式为`display: none`
+
+这样一来,是不是完美了,正常状态被隐藏的元素不占据dom空间,当hover的时候,由于失去了`display: none`规则,那么其恢复成了原始的状态,`display:block`或`display:flex`,重新占据文档流
+
+![示例](../images/49.gif)
+
+## IE浏览器上需要注意的点
+
+由于IE浏览器不支持`:where`和`:not`,因此在IE上始终占据空间
+其次对于使用`bi-hover-visible-container`和`bi-hover-visible-item`组合类名的形式,在IE上不能嵌套使用.
+`.bi-hover-visible-container` > `.bi-hover-visible-item` > `.bi-hover-visible-container` > `.bi-hover-visible-item` 的组合是不行的
+对于这种场景,可以采用原始的less方法`.hover-visible()`处理

questions/38.combo的popup是异步组件的情况下会有哪些问题.md

@@ -0,0 +1,2 @@
+# combo的popup是异步组件的情况下会有哪些问题
+

questions/38.绑定listeners时候this的新写法.md

@@ -0,0 +1,37 @@
+# 绑定listeners时候this的新写法
+
+FineUI中事件体系,借用listeners进行事件通知.
+在绑定事件的时候,有的同学喜欢使用箭头函数,有的同学喜欢使用传统function()
+并无优劣,唯一需要注意的即是this指向问题
+
+先看一个示例
+
+```javascript
+class Widget extends BI.Widget {
+    
+    render() {
+        const self = this;
+
+        const widget = {
+            type: "bi.multi_select_item",
+            ref: ref => this.itemRef = ref,
+            text: "复选item",
+            listeners: [
+                {
+                    eventName: BI.MultiSelectItem.EVENT_CHANGE,
+                    actin: () => {
+                        this.fireEvent("EVENT_CHANGE", this.itemRef.isSelected())
+                    }
+                }, {
+                    eventName: BI.MultiSelectItem.EVENT_CHANGE,
+                    actin: function () {
+                        self.fireEvent("EVENT_CHANGE", this.isSelected())
+                    }
+                }
+            ]
+        }
+    }
+}
+```
+
+相信大家能看出两个listner的区别

questions/80.combo的一些特性详解.md

@@ -7,6 +7,7 @@
 例如BI业务中有一个场景,叫做"开启权限继承后气泡提示"
 
 ![示例](../images/17.gif)
+![示例](../images/50.png)
 
 ```demo
 let combo;
@@ -242,4 +243,4 @@ BI.createWidget({
 为什么要添加这一个特性呢,实际上是因为iframe会隔离事件的缘故,下拉框弹出后,鼠标在iframe中操作并不会触发外部的`document.mousedown`
 因此下拉框也就无法收起了.
 以前是怎么处理呢,`trigger: "click-hover"`,即点击触发弹出,鼠标移除触发收起,但是体验差点意思
-![](../images/2.png)
+![](../images/2.png)