update

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

@@ -0,0 +1,215 @@
+# combo一些不为人知的特性
+
+## combo的trigger属性是可以设置为空的
+
+去掉combo的默认弹出事件,手动控制showView,在某些场景中很有用.例如需要控制有些场景要弹出,有些场景不要弹出.
+
+```demo
+
+let combo;
+BI.createWidget({
+    type: "bi.vertical",
+    items: [
+        {
+            type: "bi.combo",
+            ref: ref => combo = ref,
+            trigger: "",
+            el: {
+                type: "bi.button",
+                text: "触发弹出",
+                handler: () => {
+                    if (BI.Cache.getItem("confirmed")) {
+                        combo.showView();
+                        return;
+                    }
+                    BI.Msg.confirm("弹出是手动的,你知道吧", confirmed => {
+                        if (confirmed) {
+                            BI.Cache.setItem("confirmed", true);
+                            combo.showView();
+                        }
+                    });
+                },
+            },
+            popup: {
+                el: {
+                    type: "bi.label",
+                    text: "popup",
+                },
+            },
+        },
+    ],
+});
+
+```
+
+## combo的popup是在弹出时候创建的,但是props却是在combo创建时候确定的
+
+应对这种情况,常见的解决方案是`isDefaultInit: true`或者将popup属性改为函数
+注意设置了`isDefaultInit: true`后会有响应的性能或体验损失
+
+```demo
+
+BI.createWidget({
+    type: "bi.vertical",
+    items: [
+        {
+            type: "bi.combo",
+            el: {
+                type: "bi.label",
+                text: BI.getDate(),
+            },
+            popup: {
+                el: {
+                    type: "bi.label",
+                    text: BI.getDate(),
+                },
+            },
+        }, {
+            type: "bi.combo",
+            el: {
+                type: "bi.label",
+                text: BI.getDate(),
+            },
+            isDefaultInit: true,
+            popup: {
+                el: {
+                    type: "bi.label",
+                    text: BI.getDate(),
+                },
+            },
+        }, {
+            type: "bi.combo",
+            el: {
+                type: "bi.label",
+                text: BI.getDate(),
+            },
+            popup: () => ({
+                el: {
+                    type: "bi.label",
+                    text: BI.getDate(),
+                },
+            }),
+        },
+    ],
+});
+
+```
+
+## combo的value传递和getValue很奇怪
+
+在多数场景中,给bi.combo传递value属性,可以使下拉框在展开时候自动选中某一项.前提是popup的el组件支持value属性
+如下的combo,value是不生效的.需要对bi.button_group传递value属性
+同样的,如果在展开之前value可能发生改变,要注意value的同步
+
+```demo
+
+var Combo = BI.inherit(BI.Widget, {
+
+    render: function () {
+        return {
+            type: "bi.combo",
+            el: {
+                type: "bi.label",
+            },
+            ref: ref => this.combo = ref,
+            value: this.options.value,
+            popup: {
+                el: {
+                    type: "bi.vertical",
+                    items: [
+                        {
+                            type: "bi.button_group",
+                            layouts: [
+                                {
+                                    type: "bi.vertical",
+                                },
+                            ],
+                            items: [
+                                {
+                                    type: "bi.single_select_radio_item",
+                                    text: "1",
+                                    value: 1,
+                                }, {
+                                    type: "bi.single_select_radio_item",
+                                    text: "2",
+                                    value: 2,
+                                },
+                            ],
+                        },
+                    ],
+                },
+            },
+        };
+    },
+
+    getValue: function () {
+        return this.combo.getValue();
+    },
+
+    setValue: function (v) {
+        this.combo.setValue(v);
+    },
+});
+
+BI.shortcut("demo.combo", Combo);
+
+```
+
+## destroyWhenHide
+
+当控制下拉框的状态比较复杂的时候,可以通过收起时候销毁再重新创建来简化
+例如消息下拉框,内部两个独立的业务组件,一个展示消息列表,一个展示二维码.希望每次弹出都能重新加载消息.配置destroyWhenHide可以完全交友message_list
+的生命周期去控制,避免了监听combo弹出事件,在命令式调用刷新逻辑.
+
+```demo
+
+BI.createWidget({
+    type: "bi.vertical",
+    items: [
+        {
+            type: "bi.combo",
+            ref: ref => combo = ref,
+            trigger: "",
+            el: {
+                type: "bi.button",
+                text: "触发弹出",
+            },
+            destroyWhenHide: true,
+            popup: {
+                el: {
+                    type: "bi.vertical",
+                    items: [
+                        {
+                            type: "message_list",
+                        }, {
+                            type: "qr_code",
+                        },
+                    ],
+                },
+            },
+            listeners: [
+                {
+                    eventName: BI.Combo.EVENT_AFTER_POPUPVIEW,
+                    action: function () {
+                        // do something
+                    },
+                },
+            ],
+        },
+    ],
+});
+
+```
+
+
+## hideWhenBlur
+
+先说怎么屏蔽这个行为,再说为什么设计这个属性
+
+1. 全局变量`BI.EVENT_BLUR`改为`false`
+2. combo配置`hideWhenBlur: false`
+
+为什么要添加这一个特性呢,实际上是因为iframe会隔离事件的缘故,下拉框弹出后,鼠标在iframe中操作并不会触发外部的`document.mousedown`
+因此下拉框也就无法收起了.
+以前是怎么处理呢,`trigger: "click-hover"`,即点击触发弹出,鼠标移除触发收起,但是体验差点意思
+![](../images/2.png)

questions/80.自定义combo对popup赋值.md

@@ -1 +0,0 @@
-# 自定义combo对popup赋值