From ff378ed006bb513e8a10bef152c6edb107508874 Mon Sep 17 00:00:00 2001 From: treecat Date: Tue, 16 Aug 2022 15:46:24 +0800 Subject: [PATCH] =?UTF-8?q?KERNEL-9408=20feat:=E6=8C=89=E9=92=AE=E5=8F=AF?= =?UTF-8?q?=E4=BB=A5=E8=87=AA=E5=AE=9A=E4=B9=89=E5=9B=BE=E6=A0=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/js/base/button/demo.button.js | 144 ++++++++++++++--------- src/base/single/button/buttons/button.js | 60 +++++++--- 2 files changed, 131 insertions(+), 73 deletions(-) diff --git a/demo/js/base/button/demo.button.js b/demo/js/base/button/demo.button.js index 1f2eeec0a..420a47d77 100644 --- a/demo/js/base/button/demo.button.js +++ b/demo/js/base/button/demo.button.js @@ -1,6 +1,29 @@ +(function () { + var JokerIcon = BI.inherit(BI.Widget, { + render: function () { + var self = this; + + return { + type: "bi.label", + cls: "anim-rotate", + ref: function(ref) { + self.text = ref; + }, + }; + }, + loading: function () { + this.text.setText("🤡"); + }, + loaded: function () { + this.text.setText(""); + }, + }); + BI.shortcut("demo.joker.icon", JokerIcon); +}()); + Demo.Button = BI.inherit(BI.Widget, { props: { - baseCls: "demo-button" + baseCls: "demo-button", }, render: function () { var items = [{ @@ -16,187 +39,187 @@ Demo.Button = BI.inherit(BI.Widget, { setTimeout(() => { this.loaded(); }, 5 * 1000); - } + }, }, { type: "bi.button", text: "表示成功状态按钮", level: "success", - height: 30 + height: 30, }, { type: "bi.button", text: "表示警告状态的按钮", level: "warning", - height: 30 + height: 30, }, { type: "bi.button", text: "表示错误状态的按钮", level: "error", - height: 30 + height: 30, }, { type: "bi.button", text: "表示忽略状态的按钮", level: "ignore", - height: 30 + height: 30, }, { type: "bi.button", text: "普通灰化按钮", disabled: true, level: "success", - height: 30 + height: 30, }, { type: "bi.button", text: "忽略状态灰化按钮", disabled: true, level: "ignore", - height: 30 + height: 30, }, { type: "bi.button", text: "带图标的按钮", // level: 'ignore', iconCls: "close-font", - height: 30 + height: 30, }, { type: "bi.button", text: "一般按钮", block: true, level: "common", - height: 30 + height: 30, }, { type: "bi.button", text: "表示成功状态按钮", block: true, level: "success", - height: 30 + height: 30, }, { type: "bi.button", text: "表示警告状态的按钮", block: true, level: "warning", - height: 30 + height: 30, }, { type: "bi.button", text: "表示忽略状态的按钮", block: true, level: "ignore", - height: 30 + height: 30, }, { type: "bi.button", text: "普通灰化按钮", block: true, disabled: true, level: "success", - height: 30 + height: 30, }, { type: "bi.button", text: "忽略状态灰化按钮", block: true, disabled: true, level: "ignore", - height: 30 + height: 30, }, { type: "bi.button", text: "带图标的按钮", block: true, // level: 'ignore', iconCls: "close-font", - height: 30 + height: 30, }, { type: "bi.button", text: "一般按钮", clear: true, level: "common", - height: 30 + height: 30, }, { type: "bi.button", text: "表示成功状态按钮", clear: true, level: "success", - height: 30 + height: 30, }, { type: "bi.button", text: "表示警告状态的按钮", clear: true, level: "warning", - height: 30 + height: 30, }, { type: "bi.button", text: "表示忽略状态的按钮", clear: true, level: "ignore", - height: 30 + height: 30, }, { type: "bi.button", text: "普通灰化按钮", clear: true, disabled: true, level: "success", - height: 30 + height: 30, }, { type: "bi.button", text: "忽略状态灰化按钮", clear: true, disabled: true, level: "ignore", - height: 30 + height: 30, }, { type: "bi.button", text: "带图标的按钮", clear: true, // level: 'ignore', iconCls: "close-font", - height: 30 + height: 30, }, { type: "bi.text_button", text: "文字按钮", - height: 30 + height: 30, }, { type: "bi.button", text: "幽灵按钮（common）", ghost: true, - height: 30 + height: 30, }, { type: "bi.button", iconCls: "plus-font", text: "幽灵按钮（common）", ghost: true, - height: 30 + height: 30, }, { type: "bi.button", iconCls: "plus-font", text: "幽灵按钮（common）", ghost: true, level: "warning", - height: 30 + height: 30, }, { type: "bi.button", iconCls: "plus-font", text: "幽灵按钮（common）", ghost: true, level: "error", - height: 30 + height: 30, }, { type: "bi.button", iconCls: "plus-font", text: "幽灵按钮（common）", ghost: true, level: "success", - height: 30 + height: 30, }, { type: "bi.button", text: "幽灵按钮（common）灰化", disabled: true, ghost: true, - height: 30 + height: 30, }, { type: "bi.button", text: "弹出bubble", bubble: function () { - return BI.parseInt(Math.random() * 100) % 10 + "提示" + return BI.parseInt(Math.random() * 100) % 10 + "提示"; }, handler: function () { BI.Msg.toast("1111"); }, - height: 30 + height: 30, }, { type: "bi.button", text: "自动撑开", @@ -206,76 +229,76 @@ Demo.Button = BI.inherit(BI.Widget, { iconGap: 64, vgap: 16, hgap: 100, - iconPosition: "bottom" + iconPosition: "bottom", }, { type: "bi.button", text: "图标在下面的按钮", iconCls: "close-font", - iconPosition: "bottom" + iconPosition: "bottom", }, { type: "bi.button", text: "图标在左边的按钮", iconCls: "close-font", - iconPosition: "left" + iconPosition: "left", }, { type: "bi.button", text: "图标在右边的按钮", iconCls: "close-font", - iconPosition: "right" + iconPosition: "right", }, { type: "bi.button", text: "浅色的一般按钮", iconCls: "plus-font", - light: true + light: true, }, { type: "bi.button", text: "浅色的成功按钮", level: "success", iconCls: "plus-font", - light: true + light: true, }, { type: "bi.button", text: "浅色的警告按钮", level: "warning", iconCls: "plus-font", - light: true + light: true, }, { type: "bi.button", iconCls: "plus-font", text: "浅色的失败按钮", level: "error", cls: "hover-mask", - light: true + light: true, }, { type: "bi.button", iconCls: "plus-font", text: "朴素的按钮", level: "common", - plain: true + plain: true, }, { type: "bi.button", iconCls: "plus-font", text: "朴素的按钮", level: "success", - plain: true + plain: true, }, { type: "bi.button", iconCls: "plus-font", text: "朴素的按钮", level: "error", - plain: true + plain: true, }, { type: "bi.button", iconCls: "plus-font", text: "朴素的按钮", level: "warning", - plain: true + plain: true, }, { type: "bi.button", iconCls: "plus-font", text: "朴素的按钮", level: "ignore", - plain: true + plain: true, }, { type: "bi.button", iconCls: "plus-font", @@ -286,7 +309,7 @@ Demo.Button = BI.inherit(BI.Widget, { iconCls: "plus-font", text: "朴素的按钮", plain: true, - disabled: true + disabled: true, }, { type: "bi.button", iconCls: "plus-font", @@ -299,7 +322,7 @@ Demo.Button = BI.inherit(BI.Widget, { } this.setIcon(arr[this.i]); }, - height: 24 + height: 24, }, { type: "bi.button", text: "带加载的按钮", @@ -309,7 +332,7 @@ Demo.Button = BI.inherit(BI.Widget, { setTimeout(() => { this.loaded(); }, 5 * 1000); - } + }, }, { type: "bi.button", text: "带加载的按钮", @@ -320,7 +343,7 @@ Demo.Button = BI.inherit(BI.Widget, { setTimeout(() => { this.loaded(); }, 5 * 1000); - } + }, }, { type: "bi.button", clear: true, @@ -332,14 +355,27 @@ Demo.Button = BI.inherit(BI.Widget, { setTimeout(() => { this.loaded(); }, 5 * 1000); - } + }, }, { type: "bi.button", text: "加载中的按钮", loading: true, handler() { console.log("我是无法被触发的!"); - } + }, + }, { + type: "bi.button", + text: "自定义图标按钮（点我修改）", + icon: { + type: "demo.joker.icon", + }, + handler() { + console.log("触发点击事件"); + this.loading(); + setTimeout(() => { + this.loaded(); + }, 5 * 1000); + }, }]; return { @@ -349,10 +385,10 @@ Demo.Button = BI.inherit(BI.Widget, { hgap: 20, items: BI.map(items, function (index, value) { return { - el: value + el: value, }; - }) + }), }; - } + }, }); BI.shortcut("demo.button", Demo.Button); diff --git a/src/base/single/button/buttons/button.js b/src/base/single/button/buttons/button.js index 63b667aaa..d15051be5 100644 --- a/src/base/single/button/buttons/button.js +++ b/src/base/single/button/buttons/button.js @@ -62,6 +62,7 @@ bgap: 0, lgap: 0, rgap: 0, + icon: "", iconGap: 0, iconPosition: "left", }); @@ -90,17 +91,30 @@ } 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, - }); + if (BI.isObject(o.icon) && BI.isString(o.icon.type)) { + // FineUI 自定义 icon + this.icon = BI.createWidget(o.icon); + o.loading ? (this.icon.loading && this.icon.loading()) + : (this.icon.loaded && this.icon.loaded()); + } else { + // ReactUI 自定义的 icon + if (!o.loading && BI.isObject(o.icon)) { + this.icon = o.icon; + } else { + this.icon = BI.createWidget({ + type: "bi.icon_label", + cls: o.loading ? loadingCls : (o.iconCls || o.icon), + 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)) { @@ -179,23 +193,31 @@ return this.isLoading(); }, - isLoading() { + isLoading: function () { return this._loading === undefined ? this.options.loading : this._loading; }, - loading: function (loading) { + loading: function () { this._loading = true; this.element.addClass("loading"); - // loadingCls 可以覆盖 iconCls 所以不需要移除 iconCls - this.icon.element.addClass(loadingCls); - this.icon.setVisible(true); + if (this.icon.loading) { + this.icon.loading(); + } else { + // loadingCls 可以覆盖 iconCls 所以不需要移除 iconCls + this.icon.element.addClass(loadingCls); + this.icon.setVisible(true); + } }, - loaded() { + loaded: function () { this._loading = false; this.element.removeClass("loading"); - this.icon.element.removeClass(loadingCls); - this.icon.setVisible(!!this.options.iconCls); + if (this.icon.loaded) { + this.icon.loaded(); + } else { + this.icon.element.removeClass(loadingCls); + this.icon.setVisible(!!this.options.iconCls); + } }, setText: function (text) {