diff --git a/src/base/single/button/buttons/button.js b/src/base/single/button/buttons/button.js index 39cfffda3..2e7a75936 100644 --- a/src/base/single/button/buttons/button.js +++ b/src/base/single/button/buttons/button.js @@ -71,6 +71,35 @@ render: function () { 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默认情况下有个边框,所以要主动算行高 var lineHeight, textHeight = o.textHeight; 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) { this.icon = BI.createWidget(o.icon); } 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 = { lgap: o.iconPosition === "left" && o.text ? o.iconGap : 0, rgap: o.iconPosition === "right" ? o.iconGap : 0, tgap: o.iconPosition === "top" ? o.iconGap : 0, bgap: o.iconPosition === "bottom" ? o.iconGap : 0, }; - var items = [this.icon, BI.extend({el: this.text}, gapContainer)]; - if (isVertical(o.iconPosition)) { - layoutType = "bi.vertical"; - } + + var items = [this.icon, BI.extend({ el: this.text }, gapContainer)]; 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) { - this.element.css({ "min-width": BI.pixFormat(o.minWidth) }); - } + return [{ + type: isVertical(o.iconPosition) ? "bi.vertical" : "bi.horizontal", + horizontalAlign: "center", + verticalAlign: "middle", + items, + }]; }, doClick: function () { @@ -194,6 +208,7 @@ loading: function () { this._loading = true; this.element.addClass("loading"); + !this._iconRendered && this.containerRef.populate(this.generateItems(true)); if (this.icon.loading) { this.icon.loading(); } else { @@ -228,6 +243,7 @@ setIcon: function (cls) { var o = this.options; + !this._iconRendered && this.containerRef.populate(this.generateItems(true)); if (this.icon && o.iconCls !== cls) { this.icon.element.removeClass(o.iconCls).addClass(cls); o.iconCls = cls;