fanruan
/
fineui
4
1
Fork 3
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
Split 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, {
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);

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

@ -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) {

Write Preview
Loading…
Cancel
Save