KERNEL-12202 按钮支持 loading

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

@@ -5,9 +5,18 @@ Demo.Button = BI.inherit(BI.Widget, {
     render: function () {
         var items = [{
             type: "bi.button",
-            text: "一般按钮",
+            text: "一般按钮1111111111111",
             level: "common",
-            height: 30
+            whiteSpace: "nowrap",
+            width: 100,
+            height: 30,
+            handler() {
+                console.log("触发点击事件");
+                this.setLoading();
+                setTimeout(() => {
+                    this.setLoaded();
+                }, 5 * 1000);
+            }
         }, {
             type: "bi.button",
             text: "表示成功状态按钮",
@@ -190,19 +199,14 @@ Demo.Button = BI.inherit(BI.Widget, {
             height: 30
         }, {
             type: "bi.button",
-            text: "图标在上面的按钮，而且可以自动撑开高度",
+            text: "自动撑开",
-            iconCls: "close-font",
-            iconGap: 24,
-            iconPosition: "top"
-        },{
-            type: "bi.button",
-            text: "自动撑开高度",
             iconCls: "close-font",
-            textHeight: 32,
+            // textHeight: 32,
-            iconGap: 24,
+            // height: 32,
+            iconGap: 64,
             vgap: 16,
             hgap: 100,
-            iconPosition: "top"
+            iconPosition: "bottom"
         }, {
             type: "bi.button",
             text: "图标在下面的按钮",
@@ -288,14 +292,54 @@ Demo.Button = BI.inherit(BI.Widget, {
             iconCls: "plus-font",
             text: "点我，更改图标",
             handler() {
-                this.i =  this.i === undefined ? 0 : ++this.i;
+                this.i = this.i === undefined ? 0 : ++this.i;
                 const arr = ["text-background-font", "check-mark-ha-font", "close-font", "search-font", "date-change-h-font"];
-                if(this.i >= arr.length) {
+                if (this.i >= arr.length) {
                     this.i = 0;
                 }
                 this.setIcon(arr[this.i]);
             },
             height: 24
+        }, {
+            type: "bi.button",
+            text: "带加载的按钮",
+            handler() {
+                console.log("触发点击事件");
+                this.setLoading();
+                setTimeout(() => {
+                    this.setLoaded();
+                }, 5 * 1000);
+            }
+        }, {
+            type: "bi.button",
+            text: "带加载的按钮",
+            iconCls: "circle-close-font",
+            handler() {
+                console.log("触发点击事件");
+                this.setLoading();
+                setTimeout(() => {
+                    this.setLoaded();
+                }, 5 * 1000);
+            }
+        }, {
+            type: "bi.button",
+            clear: true,
+            text: "带加载的按钮",
+            iconCls: "circle-close-font",
+            handler() {
+                console.log("触发点击事件");
+                this.setLoading();
+                setTimeout(() => {
+                    this.setLoaded();
+                }, 5 * 1000);
+            }
+        }, {
+            type: "bi.button",
+            text: "加载中的按钮",
+            loading: true,
+            handler() {
+                console.log("我是无法被触发的!");
+            }
         }];
 
         return {
@@ -306,7 +350,7 @@ Demo.Button = BI.inherit(BI.Widget, {
             items: BI.map(items, function (index, value) {
                 return {
                     el: value
-                }
+                };
             })
         };
     }

src/base/single/button/button.basic.js

@@ -332,8 +332,13 @@ BI.BasicButton = BI.inherit(BI.Single, {
 
     _doClick: function (e) {
         if (this.isValid()) {
-            this.beforeClick(e);
+            var consume = this.beforeClick(e);
+            // 如果事件已经被消费掉了，就不再触发点击事件
+            if (consume) {
+                return;
+            }
         }
+
         this._trigger(e);
         if (this.isValid()) {
             this.doClick(e);

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

@@ -3,6 +3,8 @@
         return position === "top" || position === "bottom";
     }
 
+    var loadingCls = "button-loading-font anim-rotate";
+
     /**
      * 文字类型的按钮
      * @class BI.Button
@@ -54,7 +56,7 @@
                 whiteSpace: "nowrap",
                 textWidth: null,
                 textHeight: null,
-                hgap: props.clear ? 0 : 10,
+                hgap: props.clear ? 0 : (props.plain && !props.text ? 4 : 10),
                 vgap: 0,
                 tgap: 0,
                 bgap: 0,
@@ -86,71 +88,64 @@
                     textHeight = lineHeight;
                 }
             }
-            if (BI.isKey(o.iconCls)) {
+
-                this.icon = BI.createWidget({
+            var iconInvisible = !o.loading && !o.iconCls;
-                    type: "bi.icon_label",
+            this.icon = BI.createWidget({
-                    cls: o.iconCls,
+                type: "bi.icon_label",
-                    width: this._const.iconWidth,
+                cls: o.loading ? loadingCls : o.iconCls,
-                    height: lineHeight,
+                width: this._const.iconWidth,
-                    lineHeight: lineHeight,
+                height: lineHeight,
-                    // 不设置，自定义按钮无法居中
+                lineHeight: lineHeight,
-                    iconWidth: o.iconWidth,
+                // 不设置，自定义按钮无法居中
-                    iconHeight: o.iconHeight
+                iconWidth: o.iconWidth,
-                });
+                iconHeight: o.iconHeight,
-                this.text = BI.createWidget({
+                invisible: iconInvisible
-                    type: "bi.label",
+            });
-                    text: o.text,
+            // 用于 whiteSpace
-                    textWidth: BI.isNotNull(o.textWidth) ? o.textWidth - this._const.iconWidth : null,
+            var textWidth = iconInvisible && o.width ? o.width - o.hgap * 2 : null;
-                    textHeight: textHeight,
+            if (BI.isNotNull(o.textWidth)) {
-                    height: lineHeight,
+                // textWidth 需要减去图标
-                    value: o.value
+                textWidth = o.textWidth - (iconInvisible || isVertical(o.iconPosition) ? 0 : this._const.iconWidth);
-                });
-                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";
-                }
-                if (o.iconPosition === "right" || o.iconPosition === "bottom") {
-                    items = [BI.extend({ el: this.text }, gapContainer), this.icon];
-                }
-                BI.createWidget({
-                    type: "bi.center_adapt",
-                    element: this,
-                    hgap: o.hgap,
-                    vgap: o.vgap,
-                    items: [{
-                        type: layoutType,
-                        horizontalAlign: "center",
-                        verticalAlign: "middle",
-                        items: items
-                    }]
-                });
-            } else {
-                this.text = BI.createWidget({
-                    type: "bi.label",
-                    height: o.height,
-                    textAlign: o.textAlign,
-                    whiteSpace: o.whiteSpace,
-                    textWidth: o.textWidth,
-                    textHeight: textHeight,
-                    hgap: o.hgap,
-                    vgap: o.vgap,
-                    tgap: o.tgap,
-                    bgap: o.bgap,
-                    lgap: o.lgap,
-                    rgap: o.rgap,
-                    element: this,
-                    text: o.text,
-                    value: o.value,
-                    title: null,
-                });
             }
+            this.text = BI.createWidget({
+                type: "bi.label",
+                text: o.text,
+                whiteSpace: o.whiteSpace,
+                textAlign: o.textAlign,
+                textWidth: textWidth,
+                textHeight: textHeight,
+                height: lineHeight,
+                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";
+            }
+            if (o.iconPosition === "right" || o.iconPosition === "bottom") {
+                items = [BI.extend({el: this.text}, gapContainer), this.icon];
+            }
+            // bi.center_adapt 作用：让 hgap 不影响 iconGap。
+            BI.createWidget({
+                type: "bi.center_adapt",
+                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) {
@@ -160,7 +155,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});
             }
         },
 
@@ -180,12 +175,27 @@
             }
         },
 
+        beforeClick: function () {
+            return this.isLoading();
+        },
+
+        isLoading() {
+            return this._loading === undefined ? this.options.loading : this._loading;
+        },
+
         setLoading: function (loading) {
-            if (loading) {
+            this._loading = true;
-                this.element.addClass("loading");
+            this.element.addClass("loading");
-            } else {
+            // loadingCls 可以覆盖 iconCls 所以不需要移除 iconCls
-                this.element.removeClass("loading");
+            this.icon.element.addClass(loadingCls);
-            }
+            this.icon.setVisible(true);
+        },
+
+        setLoaded() {
+            this._loading = false;
+            this.element.removeClass("loading");
+            this.icon.element.removeClass(loadingCls);
+            this.icon.setVisible(!!this.options.iconCls);
         },
 
         setText: function (text) {

src/less/base/single/button/button.less

@@ -14,6 +14,9 @@ body .bi-button, #body .bi-button {
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
+  &.loading {
+    cursor: not-allowed;
+  }
   &.block {
     font-size: inherit;
     border-width: 0;

src/less/lib/font.less

@@ -1,4 +1,5 @@
 //字体库
+@font-button-loading: "e7cd";
 
 @font-cross: "e1ab";
 

src/less/resource/font.less

@@ -81,6 +81,10 @@
 .font-hover(pull-down-h-font, @font-down-triangle, @color-bi-text-light-gray);
 .font-hover-active(pull-down-ha-font, @font-down-triangle, @color-bi-text-light-gray);
 
+// button
+.font(button-loading-font, @font-button-loading);
+
+
 //toast
 .font(toast-error-font, @font-tip-error, @color-bi-color-toast-error);
 .font(toast-success-font, @font-tip-success, @color-bi-color-toast-success);