Browse Source

Merge remote-tracking branch 'origin/master'

es6
guy 2 years ago
parent
commit
bc9e1f6950
  1. 2
      package.json
  2. 116
      src/base/single/button/buttons/button.js

2
package.json

@ -1,6 +1,6 @@
{ {
"name": "fineui", "name": "fineui",
"version": "2.0.20221111090621", "version": "2.0.20221111145656",
"description": "fineui", "description": "fineui",
"main": "dist/fineui_without_conflict.min.js", "main": "dist/fineui_without_conflict.min.js",
"types": "dist/lib/index.d.ts", "types": "dist/lib/index.d.ts",

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

@ -71,6 +71,35 @@
render: function () { render: function () {
var o = this.options, self = this; var o = this.options, self = this;
// bi.center_adapt 作用:让 hgap 不影响 iconGap。
BI.createWidget({
type: "bi.center_adapt",
horizontalAlign: o.textAlign,
element: this,
ref: (ref) => {
self.containerRef = ref;
},
hgap: o.hgap,
vgap: o.vgap,
items: self.generateItems()
});
// 如果 options 对应的属性为 true 则给元素添加 class
var classArr = ["block", "clear", "ghost", "plain", "loading", "light"];
BI.each(classArr, function (_, clz) {
if (BI.get(o, clz) === true) {
self.element.addClass(clz);
}
});
if (o.minWidth > 0) {
this.element.css({ "min-width": BI.pixFormat(o.minWidth) });
}
},
generateItems(defaultRenderIcon) {
var o = this.options;
// 由于button默认情况下有个边框,所以要主动算行高 // 由于button默认情况下有个边框,所以要主动算行高
var lineHeight, textHeight = o.textHeight; var lineHeight, textHeight = o.textHeight;
var hasBorder = false var hasBorder = false
@ -90,7 +119,32 @@
} }
} }
var iconInvisible = !o.loading && !o.iconCls && !o.icon; var iconInvisible = !(o.loading || o.iconCls || o.icon || defaultRenderIcon);
var textWidth = o.textWidth;
if (BI.isNull(o.textWidth)) {
textWidth = (o.minWidth > 0 && o.width < o.minWidth) ? o.minWidth : o.width;
textWidth -= (o.hgap * 2 + o.iconGap)
textWidth -= iconInvisible || isVertical(o.iconPosition) ? 0 : this._const.iconWidth
}
this.text = BI.createWidget({
type: "bi.label",
text: o.text,
whiteSpace: o.whiteSpace,
textAlign: o.textAlign,
textWidth: textWidth,
textHeight: BI.toPix(textHeight, hasBorder ? 2 : 0),
height: BI.toPix(lineHeight, hasBorder ? 2 : 0),
value: o.value,
title: null,
});
if (iconInvisible) {
return [this.text]
}
this._iconRendered = true;
if (BI.isPlainObject(o.icon) && !o.loading) { if (BI.isPlainObject(o.icon) && !o.loading) {
this.icon = BI.createWidget(o.icon); this.icon = BI.createWidget(o.icon);
} else { } else {
@ -107,64 +161,24 @@
}); });
} }
// 用户可能设置的 width 小于按钮的最小宽度
var actualWidth = (o.minWidth > 0 && o.width < o.minWidth) ? o.minWidth : o.width;
var textWidth = iconInvisible && o.width ? actualWidth - o.hgap * 2 : null;
if (BI.isNotNull(o.textWidth)) {
// textWidth 需要减去图标
textWidth = o.textWidth - (iconInvisible || isVertical(o.iconPosition) ? 0 : this._const.iconWidth);
}
this.text = BI.createWidget({
type: "bi.label",
text: o.text,
whiteSpace: o.whiteSpace,
textAlign: o.textAlign,
textWidth: textWidth,
textHeight: BI.toPix(textHeight, hasBorder ? 2 : 0),
height: BI.toPix(lineHeight, hasBorder ? 2 : 0),
value: o.value,
title: null,
});
var layoutType = "bi.horizontal";
var gapContainer = { var gapContainer = {
lgap: o.iconPosition === "left" && o.text ? o.iconGap : 0, lgap: o.iconPosition === "left" && o.text ? o.iconGap : 0,
rgap: o.iconPosition === "right" ? o.iconGap : 0, rgap: o.iconPosition === "right" ? o.iconGap : 0,
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)];
if (isVertical(o.iconPosition)) { var items = [this.icon, BI.extend({ el: this.text }, gapContainer)];
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.reverse();
} }
// bi.center_adapt 作用:让 hgap 不影响 iconGap。
BI.createWidget({
type: "bi.center_adapt",
horizontalAlign: o.textAlign,
element: this,
hgap: o.hgap,
vgap: o.vgap,
items: [{
type: layoutType,
horizontalAlign: "center",
verticalAlign: "middle",
items: items,
}],
});
var classArr = ["block", "clear", "ghost", "plain", "loading", "light"];
// 如果 options 对应的属性为 true 则给元素添加 class
BI.each(classArr, function (_, clz) {
if (BI.get(o, clz) === true) {
self.element.addClass(clz);
}
});
if (o.minWidth > 0) { return [{
this.element.css({ "min-width": BI.pixFormat(o.minWidth) }); type: isVertical(o.iconPosition) ? "bi.vertical" : "bi.horizontal",
} horizontalAlign: "center",
verticalAlign: "middle",
items,
}];
}, },
doClick: function () { doClick: function () {
@ -194,6 +208,7 @@
loading: function () { loading: function () {
this._loading = true; this._loading = true;
this.element.addClass("loading"); this.element.addClass("loading");
!this._iconRendered && this.containerRef.populate(this.generateItems(true));
if (this.icon.loading) { if (this.icon.loading) {
this.icon.loading(); this.icon.loading();
} else { } else {
@ -228,6 +243,7 @@
setIcon: function (cls) { setIcon: function (cls) {
var o = this.options; var o = this.options;
!this._iconRendered && this.containerRef.populate(this.generateItems(true));
if (this.icon && o.iconCls !== cls) { if (this.icon && o.iconCls !== cls) {
this.icon.element.removeClass(o.iconCls).addClass(cls); this.icon.element.removeClass(o.iconCls).addClass(cls);
o.iconCls = cls; o.iconCls = cls;

Loading…
Cancel
Save