From 4440b1b9696f087bc21115ec7363f1c062312fcf Mon Sep 17 00:00:00 2001 From: treecat Date: Thu, 30 Jun 2022 14:13:23 +0800 Subject: [PATCH] =?UTF-8?q?DESIGN-4069=20feat:=20=E5=8E=BB=E6=8E=89=20plai?= =?UTF-8?q?n=20=E6=8C=89=E9=92=AE=E6=9C=80=E5=B0=8F=E5=AE=BD=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/js/base/button/demo.button.js | 700 ++++++++++------------- src/base/single/button/buttons/button.js | 32 +- 2 files changed, 309 insertions(+), 423 deletions(-) diff --git a/demo/js/base/button/demo.button.js b/demo/js/base/button/demo.button.js index 110431afb..d0b14aaff 100644 --- a/demo/js/base/button/demo.button.js +++ b/demo/js/base/button/demo.button.js @@ -4,416 +4,310 @@ Demo.Button = BI.inherit(BI.Widget, { }, render: function () { var items = [{ - el: { - type: "bi.button", - text: "一般按钮", - level: "common", - height: 30 - } - }, { - el: { - type: "bi.button", - text: "表示成功状态按钮", - level: "success", - height: 30 - } - }, { - el: { - type: "bi.button", - text: "表示警告状态的按钮", - level: "warning", - height: 30 - } - }, { - el: { - type: "bi.button", - text: "表示错误状态的按钮", - level: "error", - height: 30 - } - }, { - el: { - type: "bi.button", - text: "表示忽略状态的按钮", - level: "ignore", - height: 30 - } - }, { - el: { - type: "bi.button", - text: "普通灰化按钮", - disabled: true, - level: "success", - height: 30 - } - }, { - el: { - type: "bi.button", - text: "忽略状态灰化按钮", - disabled: true, - level: "ignore", - height: 30 - } - }, { - el: { - type: "bi.button", - text: "带图标的按钮", - // level: 'ignore', - iconCls: "close-font", - height: 30 - } - }, { - el: { - type: "bi.button", - text: "一般按钮", - block: true, - level: "common", - height: 30 - } - }, { - el: { - type: "bi.button", - text: "表示成功状态按钮", - block: true, - level: "success", - height: 30 - } - }, { - el: { - type: "bi.button", - text: "表示警告状态的按钮", - block: true, - level: "warning", - height: 30 - } - }, { - el: { - type: "bi.button", - text: "表示忽略状态的按钮", - block: true, - level: "ignore", - height: 30 - } - }, { - el: { - type: "bi.button", - text: "普通灰化按钮", - block: true, - disabled: true, - level: "success", - height: 30 - } - }, { - el: { - type: "bi.button", - text: "忽略状态灰化按钮", - block: true, - disabled: true, - level: "ignore", - height: 30 - } - }, { - el: { - type: "bi.button", - text: "带图标的按钮", - block: true, - // level: 'ignore', - iconCls: "close-font", - height: 30 - } - }, { - el: { - type: "bi.button", - text: "一般按钮", - clear: true, - level: "common", - height: 30 - } - }, { - el: { - type: "bi.button", - text: "表示成功状态按钮", - clear: true, - level: "success", - height: 30 - } - }, { - el: { - type: "bi.button", - text: "表示警告状态的按钮", - clear: true, - level: "warning", - height: 30 - } - }, { - el: { - type: "bi.button", - text: "表示忽略状态的按钮", - clear: true, - level: "ignore", - height: 30 - } - }, { - el: { - type: "bi.button", - text: "普通灰化按钮", - clear: true, - disabled: true, - level: "success", - height: 30 - } - }, { - el: { - type: "bi.button", - text: "忽略状态灰化按钮", - clear: true, - disabled: true, - level: "ignore", - height: 30 - } - }, { - el: { - type: "bi.button", - text: "带图标的按钮", - clear: true, - // level: 'ignore', - iconCls: "close-font", - height: 30 - } - }, { - el: { - type: "bi.text_button", - text: "文字按钮", - height: 30 - } - }, { - el: { - type: "bi.button", - text: "幽灵按钮（common）", - ghost: true, - height: 30 - } - }, { - el: { - type: "bi.button", - iconCls: "plus-font", - text: "幽灵按钮（common）", - ghost: true, - height: 30 - } - }, { - el: { - type: "bi.button", - iconCls: "plus-font", - text: "幽灵按钮（common）", - ghost: true, - level: "warning", - height: 30 - } - }, { - el: { - type: "bi.button", - iconCls: "plus-font", - text: "幽灵按钮（common）", - ghost: true, - level: "error", - height: 30 - } - }, { - el: { - type: "bi.button", - iconCls: "plus-font", - text: "幽灵按钮（common）", - ghost: true, - level: "success", - height: 30 - } - }, { - el: { - type: "bi.button", - text: "幽灵按钮（common）灰化", - disabled: true, - ghost: true, - height: 30 - } - }, { - el: { - type: "bi.button", - text: "弹出bubble", - bubble: function () { - return BI.parseInt(Math.random() * 100) % 10 + "提示" - }, - handler: function () { - BI.Msg.toast("1111"); - }, - height: 30 - } - }, { - el: { - type: "bi.button", - text: "图标在上面的按钮，而且可以自动撑开高度", - iconCls: "close-font", - iconGap: 24, - iconPosition: "top" - } + type: "bi.button", + text: "一般按钮", + level: "common", + height: 30 + }, { + type: "bi.button", + text: "表示成功状态按钮", + level: "success", + height: 30 + }, { + type: "bi.button", + text: "表示警告状态的按钮", + level: "warning", + height: 30 + }, { + type: "bi.button", + text: "表示错误状态的按钮", + level: "error", + height: 30 + }, { + type: "bi.button", + text: "表示忽略状态的按钮", + level: "ignore", + height: 30 + }, { + type: "bi.button", + text: "普通灰化按钮", + disabled: true, + level: "success", + height: 30 + }, { + type: "bi.button", + text: "忽略状态灰化按钮", + disabled: true, + level: "ignore", + height: 30 + }, { + type: "bi.button", + text: "带图标的按钮", + // level: 'ignore', + iconCls: "close-font", + height: 30 + }, { + type: "bi.button", + text: "一般按钮", + block: true, + level: "common", + height: 30 + }, { + type: "bi.button", + text: "表示成功状态按钮", + block: true, + level: "success", + height: 30 + }, { + type: "bi.button", + text: "表示警告状态的按钮", + block: true, + level: "warning", + height: 30 + }, { + type: "bi.button", + text: "表示忽略状态的按钮", + block: true, + level: "ignore", + height: 30 + }, { + type: "bi.button", + text: "普通灰化按钮", + block: true, + disabled: true, + level: "success", + height: 30 + }, { + type: "bi.button", + text: "忽略状态灰化按钮", + block: true, + disabled: true, + level: "ignore", + height: 30 + }, { + type: "bi.button", + text: "带图标的按钮", + block: true, + // level: 'ignore', + iconCls: "close-font", + height: 30 + }, { + type: "bi.button", + text: "一般按钮", + clear: true, + level: "common", + height: 30 + }, { + type: "bi.button", + text: "表示成功状态按钮", + clear: true, + level: "success", + height: 30 + }, { + type: "bi.button", + text: "表示警告状态的按钮", + clear: true, + level: "warning", + height: 30 + }, { + type: "bi.button", + text: "表示忽略状态的按钮", + clear: true, + level: "ignore", + height: 30 + }, { + type: "bi.button", + text: "普通灰化按钮", + clear: true, + disabled: true, + level: "success", + height: 30 + }, { + type: "bi.button", + text: "忽略状态灰化按钮", + clear: true, + disabled: true, + level: "ignore", + height: 30 + }, { + type: "bi.button", + text: "带图标的按钮", + clear: true, + // level: 'ignore', + iconCls: "close-font", + height: 30 + }, { + type: "bi.text_button", + text: "文字按钮", + height: 30 + }, { + type: "bi.button", + text: "幽灵按钮（common）", + ghost: true, + height: 30 + }, { + type: "bi.button", + iconCls: "plus-font", + text: "幽灵按钮（common）", + ghost: true, + height: 30 + }, { + type: "bi.button", + iconCls: "plus-font", + text: "幽灵按钮（common）", + ghost: true, + level: "warning", + height: 30 + }, { + type: "bi.button", + iconCls: "plus-font", + text: "幽灵按钮（common）", + ghost: true, + level: "error", + height: 30 + }, { + type: "bi.button", + iconCls: "plus-font", + text: "幽灵按钮（common）", + ghost: true, + level: "success", + height: 30 + }, { + type: "bi.button", + text: "幽灵按钮（common）灰化", + disabled: true, + ghost: true, + height: 30 + }, { + type: "bi.button", + text: "弹出bubble", + bubble: function () { + return BI.parseInt(Math.random() * 100) % 10 + "提示" + }, + handler: function () { + BI.Msg.toast("1111"); + }, + height: 30 + }, { + type: "bi.button", + text: "图标在上面的按钮，而且可以自动撑开高度", + iconCls: "close-font", + iconGap: 24, + iconPosition: "top" },{ - el: { - type: "bi.button", - text: "自动撑开高度", - iconCls: "close-font", - textHeight: 32, - iconGap: 24, - vgap: 16, - hgap: 100, - iconPosition: "top" - } - }, { - el: { - type: "bi.button", - text: "图标在下面的按钮", - iconCls: "close-font", - iconPosition: "bottom" - } - }, { - el: { - type: "bi.button", - text: "图标在左边的按钮", - iconCls: "close-font", - iconPosition: "left" - } - }, { - el: { - type: "bi.button", - text: "图标在右边的按钮", - iconCls: "close-font", - iconPosition: "right" - } - }, { - el: { - type: "bi.button", - text: "浅色的一般按钮", - iconCls: "plus-font", - light: true - } - }, { - el: { - type: "bi.button", - text: "浅色的成功按钮", - level: "success", - iconCls: "plus-font", - light: true - } - }, { - el: { - type: "bi.button", - text: "浅色的警告按钮", - level: "warning", - iconCls: "plus-font", - light: true - } - }, { - el: { - type: "bi.button", - iconCls: "plus-font", - text: "浅色的失败按钮", - level: "error", - cls: "hover-mask", - light: true - } - }, { - el: { - type: "bi.button", - iconCls: "plus-font", - text: "朴素的按钮", - level: "common", - plain: true - } - }, { - el: { - type: "bi.button", - iconCls: "plus-font", - text: "朴素的按钮", - level: "success", - plain: true - } - }, { - el: { - type: "bi.button", - iconCls: "plus-font", - text: "朴素的按钮", - level: "error", - plain: true - } - }, { - el: { - type: "bi.button", - iconCls: "plus-font", - text: "朴素的按钮", - level: "warning", - plain: true - } - }, { - el: { - type: "bi.button", - iconCls: "plus-font", - text: "朴素的按钮", - level: "ignore", - plain: true - } - }, { - el: { - type: "bi.button", - iconCls: "plus-font", - text: "朴素的按钮", - level: "ignore", - plain: true, - disabled: true - } - }, { - el: { - type: "bi.button", - iconCls: "plus-font", - text: "朴素的按钮", - level: "error", - plain: true, - disabled: true - } - }, { - el: { - type: "bi.button", - iconCls: "plus-font", - text: "朴素的按钮", - level: "common", - plain: true, - disabled: true - } - }, { - el: { - type: "bi.button", - iconCls: "plus-font", - text: "点我，更改图标", - handler() { - 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) { - this.i = 0; - } - this.setIcon(arr[this.i]); - }, - height: 24 - } + type: "bi.button", + text: "自动撑开高度", + iconCls: "close-font", + textHeight: 32, + iconGap: 24, + vgap: 16, + hgap: 100, + iconPosition: "top" + }, { + type: "bi.button", + text: "图标在下面的按钮", + iconCls: "close-font", + iconPosition: "bottom" + }, { + type: "bi.button", + text: "图标在左边的按钮", + iconCls: "close-font", + iconPosition: "left" + }, { + type: "bi.button", + text: "图标在右边的按钮", + iconCls: "close-font", + iconPosition: "right" + }, { + type: "bi.button", + text: "浅色的一般按钮", + iconCls: "plus-font", + light: true + }, { + type: "bi.button", + text: "浅色的成功按钮", + level: "success", + iconCls: "plus-font", + light: true + }, { + type: "bi.button", + text: "浅色的警告按钮", + level: "warning", + iconCls: "plus-font", + light: true + }, { + type: "bi.button", + iconCls: "plus-font", + text: "浅色的失败按钮", + level: "error", + cls: "hover-mask", + light: true + }, { + type: "bi.button", + iconCls: "plus-font", + text: "朴素的按钮", + level: "common", + plain: true + }, { + type: "bi.button", + iconCls: "plus-font", + text: "朴素的按钮", + level: "success", + plain: true + }, { + type: "bi.button", + iconCls: "plus-font", + text: "朴素的按钮", + level: "error", + plain: true + }, { + type: "bi.button", + iconCls: "plus-font", + text: "朴素的按钮", + level: "warning", + plain: true + }, { + type: "bi.button", + iconCls: "plus-font", + text: "朴素的按钮", + level: "ignore", + plain: true + }, { + type: "bi.button", + iconCls: "plus-font", + plain: true, + level: "error", + }, { + type: "bi.button", + iconCls: "plus-font", + text: "朴素的按钮", + plain: true, + disabled: true + }, { + type: "bi.button", + iconCls: "plus-font", + text: "点我，更改图标", + handler() { + 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) { + this.i = 0; + } + this.setIcon(arr[this.i]); + }, + height: 24 }]; - // BI.each(items, function (i, item) { - // item.el.handler = function () { - // BI.Msg.alert("按钮", this.options.text); - // }; - // }); + return { type: "bi.left", scrolly: true, vgap: 100, hgap: 20, - items: items + items: BI.map(items, function (index, value) { + return { + el: value + } + }) }; } }); diff --git a/src/base/single/button/buttons/button.js b/src/base/single/button/buttons/button.js index cd3cfebd8..6cc48ba54 100644 --- a/src/base/single/button/buttons/button.js +++ b/src/base/single/button/buttons/button.js @@ -30,12 +30,14 @@ adaptiveHeight += (tGap + bGap); } + var clearMinWidth = props.block === true || props.clear === true || props.plain; + return BI.extend(conf, { baseCls: (conf.baseCls || "") + " bi-button" + ((BI.isIE() && BI.isIE9Below()) ? " hack" : ""), attributes: { tabIndex: 1 }, - minWidth: (props.block === true || props.clear === true) ? 0 : 80, + minWidth: clearMinWidth ? 0 : 80, height: isVertical(props.iconPosition) ? adaptiveHeight : 24, shadow: props.clear !== true, isShadowShowingOnSelected: true, @@ -64,7 +66,7 @@ }, render: function () { - var o = this.options; + var o = this.options, self = this; // 由于button默认情况下有个边框，所以要主动算行高 var lineHeight, textHeight = o.textHeight; @@ -148,24 +150,14 @@ value: o.value }); } - if (o.block === true) { - this.element.addClass("block"); - } - if (o.clear === true) { - this.element.addClass("clear"); - } - if (o.ghost === true) { - this.element.addClass("ghost"); - } - if (o.plain === true) { - this.element.addClass("plain"); - } - if (o.loading === true) { - this.element.addClass("loading"); - } - if (o.light === true) { - this.element.addClass("light"); - } + 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": o.minWidth / BI.pixRatio + BI.pixUnit}); }