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

Pull request #2998: KERNEL-9408 feat:按钮可以自定义图标 

Merge in VISUAL/fineui from ~TREECAT/fineui:master to master

* commit 'e487760d6c8eb131aea96518869568f3c09c6914':
  KERNEL-9408 fix:按钮自定义图标的最终实现方式
  KERNEL-9408 fix:修改其它框架实现图标的方式
  KERNEL-9408 feat:按钮可以自定义图标
es6
treecat 2 years ago
parent
f5aea7544b e487760d6c
commit
3be3920fbd
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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 144
      demo/js/base/button/demo.button.js
  2. 22
      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);

22
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,9 +91,12 @@
}
var iconInvisible = !o.loading && !o.iconCls;
if (BI.isPlainObject(o.icon) && !o.loading) {
this.icon = BI.createWidget(o.icon);
} else {
this.icon = BI.createWidget({
type: "bi.icon_label",
cls: o.loading ? loadingCls : o.iconCls,
cls: o.loading ? loadingCls : (o.iconCls || o.icon),
width: this._const.iconWidth,
height: lineHeight,
lineHeight: lineHeight,
@ -101,6 +105,8 @@
iconHeight: o.iconHeight,
invisible: iconInvisible,
});
}
// 用于 whiteSpace
var textWidth = iconInvisible && o.width ? o.width - o.hgap * 2 : null;
if (BI.isNotNull(o.textWidth)) {
@ -179,23 +185,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");
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");
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