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();
}, 5 * 1000);
},
}, {
type: "bi.button",
text: "图标的实现交给其他框架",
icon(element) {
element.append("<span>🧙</span>");
},
}];
return {

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

@ -91,29 +91,20 @@
}
var iconInvisible = !o.loading && !o.iconCls;
if (BI.isPlainObject(o.icon)) {
if (BI.isPlainObject(o.icon) && !o.loading) {
this.icon = BI.createWidget(o.icon);
o.loading ? (this.icon.loading && this.icon.loading())
: (this.icon.loaded && this.icon.loaded());
} else {
if (!o.loading && BI.isFunction(o.icon)) {
this.icon = BI.createWidget({
type: "bi.layout",
});
o.icon(this.icon.element);
} else {
this.icon = BI.createWidget({
type: "bi.icon_label",
cls: o.loading ? loadingCls : (o.iconCls || o.icon),
width: this._const.iconWidth,
height: lineHeight,
lineHeight: lineHeight,
// 不设置,自定义按钮无法居中
iconWidth: o.iconWidth,
iconHeight: o.iconHeight,
invisible: iconInvisible,
});
}
this.icon = BI.createWidget({
type: "bi.icon_label",
cls: o.loading ? loadingCls : (o.iconCls || o.icon),
width: this._const.iconWidth,
height: lineHeight,
lineHeight: lineHeight,
// 不设置,自定义按钮无法居中
iconWidth: o.iconWidth,
iconHeight: o.iconHeight,
invisible: iconInvisible,
});
}
// 用于 whiteSpace
@ -140,12 +131,12 @@
tgap: o.iconPosition === "top" ? 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)) {
layoutType = "bi.vertical";
}
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.createWidget({
@ -170,7 +161,7 @@
});
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