From d09ae2808af346fcae331f962dfd6a4994c66604 Mon Sep 17 00:00:00 2001 From: treecat Date: Wed, 27 Jul 2022 17:22:44 +0800 Subject: [PATCH 1/4] =?UTF-8?q?KERNEL-12202=20=E6=8C=89=E9=92=AE=E6=94=AF?= =?UTF-8?q?=E6=8C=81=20loading?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/js/base/button/demo.button.js | 74 ++++++++--- src/base/single/button/button.basic.js | 7 +- src/base/single/button/buttons/button.js | 152 ++++++++++++----------- src/less/base/single/button/button.less | 3 + src/less/lib/font.less | 1 + src/less/resource/font.less | 4 + 6 files changed, 154 insertions(+), 87 deletions(-) diff --git a/demo/js/base/button/demo.button.js b/demo/js/base/button/demo.button.js index d0b14aaff..c69e01167 100644 --- a/demo/js/base/button/demo.button.js +++ b/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: "图标在上面的按钮，而且可以自动撑开高度", - iconCls: "close-font", - iconGap: 24, - iconPosition: "top" - },{ - type: "bi.button", - text: "自动撑开高度", + text: "自动撑开", iconCls: "close-font", - textHeight: 32, - iconGap: 24, + // textHeight: 32, + // 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 - } + }; }) }; } diff --git a/src/base/single/button/button.basic.js b/src/base/single/button/button.basic.js index da7791890..71a254d81 100644 --- a/src/base/single/button/button.basic.js +++ b/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); diff --git a/src/base/single/button/buttons/button.js b/src/base/single/button/buttons/button.js index 420b5f7aa..778ecfe74 100644 --- a/src/base/single/button/buttons/button.js +++ b/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({ - type: "bi.icon_label", - cls: o.iconCls, - width: this._const.iconWidth, - height: lineHeight, - lineHeight: lineHeight, - // 不设置，自定义按钮无法居中 - iconWidth: o.iconWidth, - iconHeight: o.iconHeight - }); - this.text = BI.createWidget({ - type: "bi.label", - text: o.text, - textWidth: BI.isNotNull(o.textWidth) ? o.textWidth - this._const.iconWidth : null, - textHeight: textHeight, - height: lineHeight, - value: o.value - }); - 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, - }); + + var iconInvisible = !o.loading && !o.iconCls; + this.icon = BI.createWidget({ + type: "bi.icon_label", + cls: o.loading ? loadingCls : o.iconCls, + width: this._const.iconWidth, + height: lineHeight, + lineHeight: lineHeight, + // 不设置，自定义按钮无法居中 + iconWidth: o.iconWidth, + iconHeight: o.iconHeight, + invisible: iconInvisible + }); + // 用于 whiteSpace + var textWidth = iconInvisible && o.width ? o.width - 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: 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.element.addClass("loading"); - } else { - this.element.removeClass("loading"); - } + this._loading = true; + this.element.addClass("loading"); + // loadingCls 可以覆盖 iconCls 所以不需要移除 iconCls + 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) { diff --git a/src/less/base/single/button/button.less b/src/less/base/single/button/button.less index b458ad89a..b9aad6d1a 100644 --- a/src/less/base/single/button/button.less +++ b/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; diff --git a/src/less/lib/font.less b/src/less/lib/font.less index ce865e30e..deb495daa 100644 --- a/src/less/lib/font.less +++ b/src/less/lib/font.less @@ -1,4 +1,5 @@ //字体库 +@font-button-loading: "e7cd"; @font-cross: "e1ab"; diff --git a/src/less/resource/font.less b/src/less/resource/font.less index be6730eca..fedc1b902 100644 --- a/src/less/resource/font.less +++ b/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); From 5a70e82652dea1c9abde7f434bdf9025a81a8be7 Mon Sep 17 00:00:00 2001 From: treecat Date: Wed, 27 Jul 2022 18:31:47 +0800 Subject: [PATCH 2/4] =?UTF-8?q?KERNEL-12202=20fix:setLoading=E6=94=B9?= =?UTF-8?q?=E4=B8=BAloading?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/js/base/button/demo.button.js | 16 ++++++++-------- src/base/single/button/buttons/button.js | 4 ++-- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/demo/js/base/button/demo.button.js b/demo/js/base/button/demo.button.js index c69e01167..1f2eeec0a 100644 --- a/demo/js/base/button/demo.button.js +++ b/demo/js/base/button/demo.button.js @@ -12,9 +12,9 @@ Demo.Button = BI.inherit(BI.Widget, { height: 30, handler() { console.log("触发点击事件"); - this.setLoading(); + this.loading(); setTimeout(() => { - this.setLoaded(); + this.loaded(); }, 5 * 1000); } }, { @@ -305,9 +305,9 @@ Demo.Button = BI.inherit(BI.Widget, { text: "带加载的按钮", handler() { console.log("触发点击事件"); - this.setLoading(); + this.loading(); setTimeout(() => { - this.setLoaded(); + this.loaded(); }, 5 * 1000); } }, { @@ -316,9 +316,9 @@ Demo.Button = BI.inherit(BI.Widget, { iconCls: "circle-close-font", handler() { console.log("触发点击事件"); - this.setLoading(); + this.loading(); setTimeout(() => { - this.setLoaded(); + this.loaded(); }, 5 * 1000); } }, { @@ -328,9 +328,9 @@ Demo.Button = BI.inherit(BI.Widget, { iconCls: "circle-close-font", handler() { console.log("触发点击事件"); - this.setLoading(); + this.loading(); setTimeout(() => { - this.setLoaded(); + this.loaded(); }, 5 * 1000); } }, { diff --git a/src/base/single/button/buttons/button.js b/src/base/single/button/buttons/button.js index 778ecfe74..8f46112ca 100644 --- a/src/base/single/button/buttons/button.js +++ b/src/base/single/button/buttons/button.js @@ -183,7 +183,7 @@ return this._loading === undefined ? this.options.loading : this._loading; }, - setLoading: function (loading) { + loading: function (loading) { this._loading = true; this.element.addClass("loading"); // loadingCls 可以覆盖 iconCls 所以不需要移除 iconCls @@ -191,7 +191,7 @@ this.icon.setVisible(true); }, - setLoaded() { + loaded() { this._loading = false; this.element.removeClass("loading"); this.icon.element.removeClass(loadingCls); From 8ad2fe413c8b053ed46982665cf452322c5508ee Mon Sep 17 00:00:00 2001 From: treecat Date: Thu, 28 Jul 2022 09:43:53 +0800 Subject: [PATCH 3/4] =?UTF-8?q?KERNEL-12202=20fix:=E6=8A=8Acomsume?= =?UTF-8?q?=E6=8D=A2=E6=88=90isIntercepted?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/base/single/button/button.basic.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/base/single/button/button.basic.js b/src/base/single/button/button.basic.js index 71a254d81..15529fd34 100644 --- a/src/base/single/button/button.basic.js +++ b/src/base/single/button/button.basic.js @@ -332,9 +332,9 @@ BI.BasicButton = BI.inherit(BI.Single, { _doClick: function (e) { if (this.isValid()) { - var consume = this.beforeClick(e); + var isIntercepted = this.beforeClick(e); // 如果事件已经被消费掉了，就不再触发点击事件 - if (consume) { + if (isIntercepted) { return; } } From 53bc760115d1cba7565785ffa45f5c1e99d9871f Mon Sep 17 00:00:00 2001 From: treecat Date: Thu, 28 Jul 2022 11:38:47 +0800 Subject: [PATCH 4/4] =?UTF-8?q?KERNEL-12202=20fix:=E5=8A=A0=E4=B8=80?= =?UTF-8?q?=E4=B8=AA=20beforeClick=20=E7=9A=84=E6=B3=A8=E9=87=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/base/single/button/button.basic.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/base/single/button/button.basic.js b/src/base/single/button/button.basic.js index 15529fd34..9ade43edb 100644 --- a/src/base/single/button/button.basic.js +++ b/src/base/single/button/button.basic.js @@ -345,6 +345,9 @@ BI.BasicButton = BI.inherit(BI.Single, { } }, + /** + * 子类可以得写这个方法，如果返回为 true，则可以阻止 handler 的触发 + */ beforeClick: function () { },