diff --git a/demo/js/widget/downlist/demo.downlist.js b/demo/js/widget/downlist/demo.downlist.js index 6c5382842..6b72ff61f 100644 --- a/demo/js/widget/downlist/demo.downlist.js +++ b/demo/js/widget/downlist/demo.downlist.js @@ -1,3 +1,15 @@ +(function () { + var CustomIcon = BI.inherit(BI.Widget, { + render: function () { + return { + type: "bi.label", + text: "✨", + }; + }, + }); + BI.shortcut("demo.downlist.icon", CustomIcon); +}()); + Demo.Downlist = BI.inherit(BI.Widget, { props: { baseCls: "demo-downlist" @@ -22,9 +34,9 @@ Demo.Downlist = BI.inherit(BI.Widget, { render: function () { var self = this; - // test + return { - type: "bi.horizontal_adapt", + type: "bi.left", items: [{ type: "bi.down_list_combo", ref: function (_ref) { @@ -131,7 +143,51 @@ Demo.Downlist = BI.inherit(BI.Widget, { // }] }] - ] + ], + }, { + type: "bi.down_list_combo", + el: { + type: "bi.button", + ghost: true, + iconPosition: "right", + icon: "column-next-page-h-font", + text: "自定义 trigger 和 icon 的级联下拉框", + }, + listeners: [{ + eventName: "EVENT_CHANGE", + action: function (v) { + console.log("触发值", v); + } + }, { + eventName: "EVENT_SON_VALUE_CHANGE", + action: function(v) { + console.log("二级菜单触发值", v) + } + }], + items: [ + [{ + el: { + text: "选项一", + value: 1, + icon: { + type: "demo.downlist.icon", + }, + }, + children: [{ + text: "选项一", + value: 11, + icon: { + type: "demo.downlist.icon", + }, + }, { + text: "选项二", + value: 12, + }], + }, { + text: "选项二", + value: 2, + }] + ], }, { type: "bi.multi_layer_down_list_combo", ref: function (_ref) { diff --git a/src/widget/downlist/item.downlist.js b/src/widget/downlist/item.downlist.js index 068c94fab..531806ca0 100644 --- a/src/widget/downlist/item.downlist.js +++ b/src/widget/downlist/item.downlist.js @@ -33,17 +33,21 @@ BI.DownListItem = BI.inherit(BI.BasicButton, { keyword: o.keyword, height: o.height }); + + + var icon = BI.isPlainObject(o.icon) ? o.icon : { + type: "bi.icon", + width: o.iconWidth, + height: o.iconHeight, + } + this.icon = BI.createWidget({ type: "bi.center_adapt", width: 36, height: o.height, items: [{ - el: { - type: "bi.icon", - width: o.iconWidth, - height: o.iconHeight - } - }] + el: icon, + }], }); BI.createWidget(BI.extend({ diff --git a/src/widget/downlist/item.downlistgroup.js b/src/widget/downlist/item.downlistgroup.js index e142a72b7..b72d819a4 100644 --- a/src/widget/downlist/item.downlistgroup.js +++ b/src/widget/downlist/item.downlistgroup.js @@ -8,6 +8,7 @@ BI.DownListGroupItem = BI.inherit(BI.BasicButton, { }, // invalid: true, iconCls1: "dot-e-font", + icon: "", iconCls2: "pull-right-e-font" }); }, @@ -21,20 +22,29 @@ BI.DownListGroupItem = BI.inherit(BI.BasicButton, { textAlign: "left", text: o.text, value: o.value, - height: o.height - }); - - this.icon1 = BI.createWidget({ - type: "bi.icon_button", - cls: o.iconCls1, - width: 36, height: o.height, - iconHeight: o.iconHeight, - iconWidth: 36, - disableSelected: true, - selected: this._digest(o.value) }); + if (BI.isPlainObject(o.icon)) { + this.icon1 = BI.createWidget({ + width: 36, + height: o.height, + type: "bi.center_adapt", + items: [o.icon], + }); + } else { + this.icon1 = BI.createWidget({ + type: "bi.icon_button", + cls: o.iconCls1, + width: 36, + height: o.height, + iconHeight: o.iconHeight, + iconWidth: 36, + disableSelected: true, + selected: this._digest(o.value), + }); + } + this.icon2 = BI.createWidget({ type: "bi.icon_button", cls: o.iconCls2, @@ -117,8 +127,8 @@ BI.DownListGroupItem = BI.inherit(BI.BasicButton, { }, setValue: function (v) { - this.icon1.setSelected(this._digest(v)); - } + this.icon1.setSelected && this.icon1.setSelected(this._digest(v)); + }, }); BI.DownListGroupItem.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.down_list_group_item", BI.DownListGroupItem); \ No newline at end of file +BI.shortcut("bi.down_list_group_item", BI.DownListGroupItem);