KERNEL-13489 fix: 让Button没有icon的情况下只渲染一个 label

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;