Browse Source

KERNEL-9408 fix:按钮自定义图标的最终实现方式

es6
treecat 2 years ago
parent
commit
e487760d6c
  1. 6
      demo/js/base/button/demo.button.js
  2. 39
      src/base/single/button/buttons/button.js

6
demo/js/base/button/demo.button.js

@ -376,12 +376,6 @@ Demo.Button = BI.inherit(BI.Widget, {
this.loaded(); this.loaded();
}, 5 * 1000); }, 5 * 1000);
}, },
}, {
type: "bi.button",
text: "图标的实现交给其他框架",
icon(element) {
element.append("<span>🧙</span>");
},
}]; }];
return { return {

39
src/base/single/button/buttons/button.js

@ -91,29 +91,20 @@
} }
var iconInvisible = !o.loading && !o.iconCls; var iconInvisible = !o.loading && !o.iconCls;
if (BI.isPlainObject(o.icon)) { if (BI.isPlainObject(o.icon) && !o.loading) {
this.icon = BI.createWidget(o.icon); this.icon = BI.createWidget(o.icon);
o.loading ? (this.icon.loading && this.icon.loading())
: (this.icon.loaded && this.icon.loaded());
} else { } else {
if (!o.loading && BI.isFunction(o.icon)) { this.icon = BI.createWidget({
this.icon = BI.createWidget({ type: "bi.icon_label",
type: "bi.layout", cls: o.loading ? loadingCls : (o.iconCls || o.icon),
}); width: this._const.iconWidth,
o.icon(this.icon.element); height: lineHeight,
} else { lineHeight: lineHeight,
this.icon = BI.createWidget({ // 不设置,自定义按钮无法居中
type: "bi.icon_label", iconWidth: o.iconWidth,
cls: o.loading ? loadingCls : (o.iconCls || o.icon), iconHeight: o.iconHeight,
width: this._const.iconWidth, invisible: iconInvisible,
height: lineHeight, });
lineHeight: lineHeight,
// 不设置,自定义按钮无法居中
iconWidth: o.iconWidth,
iconHeight: o.iconHeight,
invisible: iconInvisible,
});
}
} }
// 用于 whiteSpace // 用于 whiteSpace
@ -140,12 +131,12 @@
tgap: o.iconPosition === "top" ? o.iconGap : 0, tgap: o.iconPosition === "top" ? o.iconGap : 0,
bgap: o.iconPosition === "bottom" ? o.iconGap : 0, bgap: o.iconPosition === "bottom" ? o.iconGap : 0,
}; };
var items = [this.icon, BI.extend({ el: this.text }, gapContainer)]; var items = [this.icon, BI.extend({el: this.text}, gapContainer)];
if (isVertical(o.iconPosition)) { if (isVertical(o.iconPosition)) {
layoutType = "bi.vertical"; layoutType = "bi.vertical";
} }
if (o.iconPosition === "right" || o.iconPosition === "bottom") { if (o.iconPosition === "right" || o.iconPosition === "bottom") {
items = [BI.extend({ el: this.text }, gapContainer), this.icon]; items = [BI.extend({el: this.text}, gapContainer), this.icon];
} }
// bi.center_adapt 作用:让 hgap 不影响 iconGap。 // bi.center_adapt 作用:让 hgap 不影响 iconGap。
BI.createWidget({ BI.createWidget({
@ -170,7 +161,7 @@
}); });
if (o.minWidth > 0) { if (o.minWidth > 0) {
this.element.css({ "min-width": o.minWidth / BI.pixRatio + BI.pixUnit }); this.element.css({"min-width": o.minWidth / BI.pixRatio + BI.pixUnit});
} }
}, },

Loading…
Cancel
Save