fanruan
/
fineui
4
1
Fork 3
Code Issues 1 Pull Requests Releases Wiki Activity
Browse Source

Merge pull request #144104 in DEC/fineui from master to feature/x 

* commit '3be3920fbd4dfe199f7342abf943bacf8cbc8db9':
  KERNEL-9408 fix:按钮自定义图标的最终实现方式
  KERNEL-9408 fix:修改其它框架实现图标的方式
  KERNEL-9408 feat:按钮可以自定义图标
master
superman 2 years ago
parent
a92104611e 3be3920fbd
commit
7c96b8af67
2 changed files with 126 additions and 76 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 144
      demo/js/base/button/demo.button.js
  2. 58
      src/base/single/button/buttons/button.js

144
demo/js/base/button/demo.button.js
Unescape View File

@ -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, { Demo.Button = BI.inherit(BI.Widget, {
props: { props: {
baseCls: "demo-button" baseCls: "demo-button",
}, },
render: function () { render: function () {
var items = [{ var items = [{
@ -16,187 +39,187 @@ Demo.Button = BI.inherit(BI.Widget, {
setTimeout(() => { setTimeout(() => {
this.loaded(); this.loaded();
}, 5 * 1000); }, 5 * 1000);
} },
}, { }, {
type: "bi.button", type: "bi.button",
text: "表示成功状态按钮", text: "表示成功状态按钮",
level: "success", level: "success",
height: 30 height: 30,
}, { }, {
type: "bi.button", type: "bi.button",
text: "表示警告状态的按钮", text: "表示警告状态的按钮",
level: "warning", level: "warning",
height: 30 height: 30,
}, { }, {
type: "bi.button", type: "bi.button",
text: "表示错误状态的按钮", text: "表示错误状态的按钮",
level: "error", level: "error",
height: 30 height: 30,
}, { }, {
type: "bi.button", type: "bi.button",
text: "表示忽略状态的按钮", text: "表示忽略状态的按钮",
level: "ignore", level: "ignore",
height: 30 height: 30,
}, { }, {
type: "bi.button", type: "bi.button",
text: "普通灰化按钮", text: "普通灰化按钮",
disabled: true, disabled: true,
level: "success", level: "success",
height: 30 height: 30,
}, { }, {
type: "bi.button", type: "bi.button",
text: "忽略状态灰化按钮", text: "忽略状态灰化按钮",
disabled: true, disabled: true,
level: "ignore", level: "ignore",
height: 30 height: 30,
}, { }, {
type: "bi.button", type: "bi.button",
text: "带图标的按钮", text: "带图标的按钮",
// level: 'ignore', // level: 'ignore',
iconCls: "close-font", iconCls: "close-font",
height: 30 height: 30,
}, { }, {
type: "bi.button", type: "bi.button",
text: "一般按钮", text: "一般按钮",
block: true, block: true,
level: "common", level: "common",
height: 30 height: 30,
}, { }, {
type: "bi.button", type: "bi.button",
text: "表示成功状态按钮", text: "表示成功状态按钮",
block: true, block: true,
level: "success", level: "success",
height: 30 height: 30,
}, { }, {
type: "bi.button", type: "bi.button",
text: "表示警告状态的按钮", text: "表示警告状态的按钮",
block: true, block: true,
level: "warning", level: "warning",
height: 30 height: 30,
}, { }, {
type: "bi.button", type: "bi.button",
text: "表示忽略状态的按钮", text: "表示忽略状态的按钮",
block: true, block: true,
level: "ignore", level: "ignore",
height: 30 height: 30,
}, { }, {
type: "bi.button", type: "bi.button",
text: "普通灰化按钮", text: "普通灰化按钮",
block: true, block: true,
disabled: true, disabled: true,
level: "success", level: "success",
height: 30 height: 30,
}, { }, {
type: "bi.button", type: "bi.button",
text: "忽略状态灰化按钮", text: "忽略状态灰化按钮",
block: true, block: true,
disabled: true, disabled: true,
level: "ignore", level: "ignore",
height: 30 height: 30,
}, { }, {
type: "bi.button", type: "bi.button",
text: "带图标的按钮", text: "带图标的按钮",
block: true, block: true,
// level: 'ignore', // level: 'ignore',
iconCls: "close-font", iconCls: "close-font",
height: 30 height: 30,
}, { }, {
type: "bi.button", type: "bi.button",
text: "一般按钮", text: "一般按钮",
clear: true, clear: true,
level: "common", level: "common",
height: 30 height: 30,
}, { }, {
type: "bi.button", type: "bi.button",
text: "表示成功状态按钮", text: "表示成功状态按钮",
clear: true, clear: true,
level: "success", level: "success",
height: 30 height: 30,
}, { }, {
type: "bi.button", type: "bi.button",
text: "表示警告状态的按钮", text: "表示警告状态的按钮",
clear: true, clear: true,
level: "warning", level: "warning",
height: 30 height: 30,
}, { }, {
type: "bi.button", type: "bi.button",
text: "表示忽略状态的按钮", text: "表示忽略状态的按钮",
clear: true, clear: true,
level: "ignore", level: "ignore",
height: 30 height: 30,
}, { }, {
type: "bi.button", type: "bi.button",
text: "普通灰化按钮", text: "普通灰化按钮",
clear: true, clear: true,
disabled: true, disabled: true,
level: "success", level: "success",
height: 30 height: 30,
}, { }, {
type: "bi.button", type: "bi.button",
text: "忽略状态灰化按钮", text: "忽略状态灰化按钮",
clear: true, clear: true,
disabled: true, disabled: true,
level: "ignore", level: "ignore",
height: 30 height: 30,
}, { }, {
type: "bi.button", type: "bi.button",
text: "带图标的按钮", text: "带图标的按钮",
clear: true, clear: true,
// level: 'ignore', // level: 'ignore',
iconCls: "close-font", iconCls: "close-font",
height: 30 height: 30,
}, { }, {
type: "bi.text_button", type: "bi.text_button",
text: "文字按钮", text: "文字按钮",
height: 30 height: 30,
}, { }, {
type: "bi.button", type: "bi.button",
text: "幽灵按钮（common）", text: "幽灵按钮（common）",
ghost: true, ghost: true,
height: 30 height: 30,
}, { }, {
type: "bi.button", type: "bi.button",
iconCls: "plus-font", iconCls: "plus-font",
text: "幽灵按钮（common）", text: "幽灵按钮（common）",
ghost: true, ghost: true,
height: 30 height: 30,
}, { }, {
type: "bi.button", type: "bi.button",
iconCls: "plus-font", iconCls: "plus-font",
text: "幽灵按钮（common）", text: "幽灵按钮（common）",
ghost: true, ghost: true,
level: "warning", level: "warning",
height: 30 height: 30,
}, { }, {
type: "bi.button", type: "bi.button",
iconCls: "plus-font", iconCls: "plus-font",
text: "幽灵按钮（common）", text: "幽灵按钮（common）",
ghost: true, ghost: true,
level: "error", level: "error",
height: 30 height: 30,
}, { }, {
type: "bi.button", type: "bi.button",
iconCls: "plus-font", iconCls: "plus-font",
text: "幽灵按钮（common）", text: "幽灵按钮（common）",
ghost: true, ghost: true,
level: "success", level: "success",
height: 30 height: 30,
}, { }, {
type: "bi.button", type: "bi.button",
text: "幽灵按钮（common）灰化", text: "幽灵按钮（common）灰化",
disabled: true, disabled: true,
ghost: true, ghost: true,
height: 30 height: 30,
}, { }, {
type: "bi.button", type: "bi.button",
text: "弹出bubble", text: "弹出bubble",
bubble: function () { bubble: function () {
return BI.parseInt(Math.random() * 100) % 10 + "提示" return BI.parseInt(Math.random() * 100) % 10 + "提示";
}, },
handler: function () { handler: function () {
BI.Msg.toast("1111"); BI.Msg.toast("1111");
}, },
height: 30 height: 30,
}, { }, {
type: "bi.button", type: "bi.button",
text: "自动撑开", text: "自动撑开",
@ -206,76 +229,76 @@ Demo.Button = BI.inherit(BI.Widget, {
iconGap: 64, iconGap: 64,
vgap: 16, vgap: 16,
hgap: 100, hgap: 100,
iconPosition: "bottom" iconPosition: "bottom",
}, { }, {
type: "bi.button", type: "bi.button",
text: "图标在下面的按钮", text: "图标在下面的按钮",
iconCls: "close-font", iconCls: "close-font",
iconPosition: "bottom" iconPosition: "bottom",
}, { }, {
type: "bi.button", type: "bi.button",
text: "图标在左边的按钮", text: "图标在左边的按钮",
iconCls: "close-font", iconCls: "close-font",
iconPosition: "left" iconPosition: "left",
}, { }, {
type: "bi.button", type: "bi.button",
text: "图标在右边的按钮", text: "图标在右边的按钮",
iconCls: "close-font", iconCls: "close-font",
iconPosition: "right" iconPosition: "right",
}, { }, {
type: "bi.button", type: "bi.button",
text: "浅色的一般按钮", text: "浅色的一般按钮",
iconCls: "plus-font", iconCls: "plus-font",
light: true light: true,
}, { }, {
type: "bi.button", type: "bi.button",
text: "浅色的成功按钮", text: "浅色的成功按钮",
level: "success", level: "success",
iconCls: "plus-font", iconCls: "plus-font",
light: true light: true,
}, { }, {
type: "bi.button", type: "bi.button",
text: "浅色的警告按钮", text: "浅色的警告按钮",
level: "warning", level: "warning",
iconCls: "plus-font", iconCls: "plus-font",
light: true light: true,
}, { }, {
type: "bi.button", type: "bi.button",
iconCls: "plus-font", iconCls: "plus-font",
text: "浅色的失败按钮", text: "浅色的失败按钮",
level: "error", level: "error",
cls: "hover-mask", cls: "hover-mask",
light: true light: true,
}, { }, {
type: "bi.button", type: "bi.button",
iconCls: "plus-font", iconCls: "plus-font",
text: "朴素的按钮", text: "朴素的按钮",
level: "common", level: "common",
plain: true plain: true,
}, { }, {
type: "bi.button", type: "bi.button",
iconCls: "plus-font", iconCls: "plus-font",
text: "朴素的按钮", text: "朴素的按钮",
level: "success", level: "success",
plain: true plain: true,
}, { }, {
type: "bi.button", type: "bi.button",
iconCls: "plus-font", iconCls: "plus-font",
text: "朴素的按钮", text: "朴素的按钮",
level: "error", level: "error",
plain: true plain: true,
}, { }, {
type: "bi.button", type: "bi.button",
iconCls: "plus-font", iconCls: "plus-font",
text: "朴素的按钮", text: "朴素的按钮",
level: "warning", level: "warning",
plain: true plain: true,
}, { }, {
type: "bi.button", type: "bi.button",
iconCls: "plus-font", iconCls: "plus-font",
text: "朴素的按钮", text: "朴素的按钮",
level: "ignore", level: "ignore",
plain: true plain: true,
}, { }, {
type: "bi.button", type: "bi.button",
iconCls: "plus-font", iconCls: "plus-font",
@ -286,7 +309,7 @@ Demo.Button = BI.inherit(BI.Widget, {
iconCls: "plus-font", iconCls: "plus-font",
text: "朴素的按钮", text: "朴素的按钮",
plain: true, plain: true,
disabled: true disabled: true,
}, { }, {
type: "bi.button", type: "bi.button",
iconCls: "plus-font", iconCls: "plus-font",
@ -299,7 +322,7 @@ Demo.Button = BI.inherit(BI.Widget, {
} }
this.setIcon(arr[this.i]); this.setIcon(arr[this.i]);
}, },
height: 24 height: 24,
}, { }, {
type: "bi.button", type: "bi.button",
text: "带加载的按钮", text: "带加载的按钮",
@ -309,7 +332,7 @@ Demo.Button = BI.inherit(BI.Widget, {
setTimeout(() => { setTimeout(() => {
this.loaded(); this.loaded();
}, 5 * 1000); }, 5 * 1000);
} },
}, { }, {
type: "bi.button", type: "bi.button",
text: "带加载的按钮", text: "带加载的按钮",
@ -320,7 +343,7 @@ Demo.Button = BI.inherit(BI.Widget, {
setTimeout(() => { setTimeout(() => {
this.loaded(); this.loaded();
}, 5 * 1000); }, 5 * 1000);
} },
}, { }, {
type: "bi.button", type: "bi.button",
clear: true, clear: true,
@ -332,14 +355,27 @@ Demo.Button = BI.inherit(BI.Widget, {
setTimeout(() => { setTimeout(() => {
this.loaded(); this.loaded();
}, 5 * 1000); }, 5 * 1000);
} },
}, { }, {
type: "bi.button", type: "bi.button",
text: "加载中的按钮", text: "加载中的按钮",
loading: true, loading: true,
handler() { handler() {
console.log("我是无法被触发的!"); console.log("我是无法被触发的!");
} },
}, {
type: "bi.button",
text: "自定义图标按钮（点我修改）",
icon: {
type: "demo.joker.icon",
},
handler() {
console.log("触发点击事件");
this.loading();
setTimeout(() => {
this.loaded();
}, 5 * 1000);
},
}]; }];
return { return {
@ -349,10 +385,10 @@ Demo.Button = BI.inherit(BI.Widget, {
hgap: 20, hgap: 20,
items: BI.map(items, function (index, value) { items: BI.map(items, function (index, value) {
return { return {
el: value el: value,
}; };
}) }),
}; };
} },
}); });
BI.shortcut("demo.button", Demo.Button); BI.shortcut("demo.button", Demo.Button);

58
src/base/single/button/buttons/button.js
Unescape View File

@ -62,6 +62,7 @@
bgap: 0, bgap: 0,
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
icon: "",
iconGap: 0, iconGap: 0,
iconPosition: "left", iconPosition: "left",
}); });
@ -90,17 +91,22 @@
} }
var iconInvisible = !o.loading && !o.iconCls; var iconInvisible = !o.loading && !o.iconCls;
this.icon = BI.createWidget({ if (BI.isPlainObject(o.icon) && !o.loading) {
type: "bi.icon_label", this.icon = BI.createWidget(o.icon);
cls: o.loading ? loadingCls : o.iconCls, } else {
width: this._const.iconWidth, this.icon = BI.createWidget({
height: lineHeight, type: "bi.icon_label",
lineHeight: lineHeight, cls: o.loading ? loadingCls : (o.iconCls || o.icon),
// 不设置，自定义按钮无法居中 width: this._const.iconWidth,
iconWidth: o.iconWidth, height: lineHeight,
iconHeight: o.iconHeight, lineHeight: lineHeight,
invisible: iconInvisible, // 不设置，自定义按钮无法居中
}); iconWidth: o.iconWidth,
iconHeight: o.iconHeight,
invisible: iconInvisible,
});
}
// 用于 whiteSpace // 用于 whiteSpace
var textWidth = iconInvisible && o.width ? o.width - o.hgap * 2 : null; var textWidth = iconInvisible && o.width ? o.width - o.hgap * 2 : null;
if (BI.isNotNull(o.textWidth)) { if (BI.isNotNull(o.textWidth)) {
@ -125,12 +131,12 @@
tgap: o.iconPosition === "top" ? o.iconGap : 0, tgap: o.iconPosition === "top" ? o.iconGap : 0,
bgap: o.iconPosition === "bottom" ? o.iconGap : 0, bgap: o.iconPosition === "bottom" ? o.iconGap : 0,
}; };
var items = [this.icon, BI.extend({ el: this.text }, gapContainer)]; var items = [this.icon, BI.extend({el: this.text}, gapContainer)];
if (isVertical(o.iconPosition)) { if (isVertical(o.iconPosition)) {
layoutType = "bi.vertical"; layoutType = "bi.vertical";
} }
if (o.iconPosition === "right" || o.iconPosition === "bottom") { if (o.iconPosition === "right" || o.iconPosition === "bottom") {
items = [BI.extend({ el: this.text }, gapContainer), this.icon]; items = [BI.extend({el: this.text}, gapContainer), this.icon];
} }
// bi.center_adapt 作用：让 hgap 不影响 iconGap。 // bi.center_adapt 作用：让 hgap 不影响 iconGap。
BI.createWidget({ BI.createWidget({
@ -155,7 +161,7 @@
}); });
if (o.minWidth > 0) { 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});
} }
}, },
@ -179,23 +185,31 @@
return this.isLoading(); return this.isLoading();
}, },
isLoading() { isLoading: function () {
return this._loading === undefined ? this.options.loading : this._loading; return this._loading === undefined ? this.options.loading : this._loading;
}, },
loading: function (loading) { loading: function () {
this._loading = true; this._loading = true;
this.element.addClass("loading"); this.element.addClass("loading");
// loadingCls 可以覆盖 iconCls 所以不需要移除 iconCls if (this.icon.loading) {
this.icon.element.addClass(loadingCls); this.icon.loading();
this.icon.setVisible(true); } else {
// loadingCls 可以覆盖 iconCls 所以不需要移除 iconCls
this.icon.element.addClass(loadingCls);
this.icon.setVisible(true);
}
}, },
loaded() { loaded: function () {
this._loading = false; this._loading = false;
this.element.removeClass("loading"); this.element.removeClass("loading");
this.icon.element.removeClass(loadingCls); if (this.icon.loaded) {
this.icon.setVisible(!!this.options.iconCls); this.icon.loaded();
} else {
this.icon.element.removeClass(loadingCls);
this.icon.setVisible(!!this.options.iconCls);
}
}, },
setText: function (text) { setText: function (text) {

Write Preview
Loading…
Cancel
Save