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

KERNEL-9408 feat:按钮可以自定义图标

es6
treecat 2 years ago
parent
981103f70f
commit
ff378ed006
2 changed files with 131 additions and 73 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. 60
      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);

60
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,30 @@
} }
var iconInvisible = !o.loading && !o.iconCls; var iconInvisible = !o.loading && !o.iconCls;
this.icon = BI.createWidget({ if (BI.isObject(o.icon) && BI.isString(o.icon.type)) {
type: "bi.icon_label", // FineUI 自定义 icon
cls: o.loading ? loadingCls : o.iconCls, this.icon = BI.createWidget(o.icon);
width: this._const.iconWidth, o.loading ? (this.icon.loading && this.icon.loading())
height: lineHeight, : (this.icon.loaded && this.icon.loaded());
lineHeight: lineHeight, } else {
// 不设置，自定义按钮无法居中 // ReactUI 自定义的 icon
iconWidth: o.iconWidth, if (!o.loading && BI.isObject(o.icon)) {
iconHeight: o.iconHeight, this.icon = o.icon;
invisible: iconInvisible, } 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 // 用于 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)) {
@ -179,23 +193,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