diff --git a/images/2.png b/images/2.png new file mode 100644 index 0000000..0261a88 Binary files /dev/null and b/images/2.png differ diff --git a/questions/80.combo的一些特性详解.md b/questions/80.combo的一些特性详解.md new file mode 100644 index 0000000..53e598a --- /dev/null +++ b/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) \ No newline at end of file diff --git a/questions/80.自定义combo对popup赋值.md b/questions/80.自定义combo对popup赋值.md deleted file mode 100644 index cefabda..0000000 --- a/questions/80.自定义combo对popup赋值.md +++ /dev/null @@ -1 +0,0 @@ -# 自定义combo对popup赋值 \ No newline at end of file diff --git a/questions/81.combo的一些特性.md b/questions/81.combo的一些特性.md new file mode 100644 index 0000000..e69de29