Browse Source

Pull request #2945: KERNEL-12202 feat:按钮支持 loading

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

* commit '53bc760115d1cba7565785ffa45f5c1e99d9871f':
  KERNEL-12202 fix:加一个 beforeClick 的注释
  KERNEL-12202 fix:把comsume换成isIntercepted
  KERNEL-12202 fix:setLoading改为loading
  KERNEL-12202 按钮支持 loading
es6
treecat 2 years ago
parent
commit
8b4f01452b
  1. 72
      demo/js/base/button/demo.button.js
  2. 10
      src/base/single/button/button.basic.js
  3. 76
      src/base/single/button/buttons/button.js
  4. 3
      src/less/base/single/button/button.less
  5. 1
      src/less/lib/font.less
  6. 4
      src/less/resource/font.less

72
demo/js/base/button/demo.button.js

@ -5,9 +5,18 @@ Demo.Button = BI.inherit(BI.Widget, {
render: function () { render: function () {
var items = [{ var items = [{
type: "bi.button", type: "bi.button",
text: "一般按钮", text: "一般按钮1111111111111",
level: "common", level: "common",
height: 30 whiteSpace: "nowrap",
width: 100,
height: 30,
handler() {
console.log("触发点击事件");
this.loading();
setTimeout(() => {
this.loaded();
}, 5 * 1000);
}
}, { }, {
type: "bi.button", type: "bi.button",
text: "表示成功状态按钮", text: "表示成功状态按钮",
@ -190,19 +199,14 @@ Demo.Button = BI.inherit(BI.Widget, {
height: 30 height: 30
}, { }, {
type: "bi.button", type: "bi.button",
text: "图标在上面的按钮,而且可以自动撑开高度", text: "自动撑开",
iconCls: "close-font", iconCls: "close-font",
iconGap: 24, // textHeight: 32,
iconPosition: "top" // height: 32,
},{ iconGap: 64,
type: "bi.button",
text: "自动撑开高度",
iconCls: "close-font",
textHeight: 32,
iconGap: 24,
vgap: 16, vgap: 16,
hgap: 100, hgap: 100,
iconPosition: "top" iconPosition: "bottom"
}, { }, {
type: "bi.button", type: "bi.button",
text: "图标在下面的按钮", text: "图标在下面的按钮",
@ -290,12 +294,52 @@ Demo.Button = BI.inherit(BI.Widget, {
handler() { handler() {
this.i = this.i === undefined ? 0 : ++this.i; 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"]; const arr = ["text-background-font", "check-mark-ha-font", "close-font", "search-font", "date-change-h-font"];
if(this.i >= arr.length) { if (this.i >= arr.length) {
this.i = 0; this.i = 0;
} }
this.setIcon(arr[this.i]); this.setIcon(arr[this.i]);
}, },
height: 24 height: 24
}, {
type: "bi.button",
text: "带加载的按钮",
handler() {
console.log("触发点击事件");
this.loading();
setTimeout(() => {
this.loaded();
}, 5 * 1000);
}
}, {
type: "bi.button",
text: "带加载的按钮",
iconCls: "circle-close-font",
handler() {
console.log("触发点击事件");
this.loading();
setTimeout(() => {
this.loaded();
}, 5 * 1000);
}
}, {
type: "bi.button",
clear: true,
text: "带加载的按钮",
iconCls: "circle-close-font",
handler() {
console.log("触发点击事件");
this.loading();
setTimeout(() => {
this.loaded();
}, 5 * 1000);
}
}, {
type: "bi.button",
text: "加载中的按钮",
loading: true,
handler() {
console.log("我是无法被触发的!");
}
}]; }];
return { return {
@ -306,7 +350,7 @@ Demo.Button = BI.inherit(BI.Widget, {
items: BI.map(items, function (index, value) { items: BI.map(items, function (index, value) {
return { return {
el: value el: value
} };
}) })
}; };
} }

10
src/base/single/button/button.basic.js

@ -332,14 +332,22 @@ BI.BasicButton = BI.inherit(BI.Single, {
_doClick: function (e) { _doClick: function (e) {
if (this.isValid()) { if (this.isValid()) {
this.beforeClick(e); var isIntercepted = this.beforeClick(e);
// 如果事件已经被消费掉了,就不再触发点击事件
if (isIntercepted) {
return;
}
} }
this._trigger(e); this._trigger(e);
if (this.isValid()) { if (this.isValid()) {
this.doClick(e); this.doClick(e);
} }
}, },
/**
* 子类可以得写这个方法如果返回为 true则可以阻止 handler 的触发
*/
beforeClick: function () { beforeClick: function () {
}, },

76
src/base/single/button/buttons/button.js

@ -3,6 +3,8 @@
return position === "top" || position === "bottom"; return position === "top" || position === "bottom";
} }
var loadingCls = "button-loading-font anim-rotate";
/** /**
* 文字类型的按钮 * 文字类型的按钮
* @class BI.Button * @class BI.Button
@ -54,7 +56,7 @@
whiteSpace: "nowrap", whiteSpace: "nowrap",
textWidth: null, textWidth: null,
textHeight: null, textHeight: null,
hgap: props.clear ? 0 : 10, hgap: props.clear ? 0 : (props.plain && !props.text ? 4 : 10),
vgap: 0, vgap: 0,
tgap: 0, tgap: 0,
bgap: 0, bgap: 0,
@ -86,24 +88,35 @@
textHeight = lineHeight; textHeight = lineHeight;
} }
} }
if (BI.isKey(o.iconCls)) {
var iconInvisible = !o.loading && !o.iconCls;
this.icon = BI.createWidget({ this.icon = BI.createWidget({
type: "bi.icon_label", type: "bi.icon_label",
cls: o.iconCls, cls: o.loading ? loadingCls : o.iconCls,
width: this._const.iconWidth, width: this._const.iconWidth,
height: lineHeight, height: lineHeight,
lineHeight: lineHeight, lineHeight: lineHeight,
// 不设置,自定义按钮无法居中 // 不设置,自定义按钮无法居中
iconWidth: o.iconWidth, iconWidth: o.iconWidth,
iconHeight: o.iconHeight iconHeight: o.iconHeight,
invisible: iconInvisible
}); });
// 用于 whiteSpace
var textWidth = iconInvisible && o.width ? o.width - o.hgap * 2 : null;
if (BI.isNotNull(o.textWidth)) {
// textWidth 需要减去图标
textWidth = o.textWidth - (iconInvisible || isVertical(o.iconPosition) ? 0 : this._const.iconWidth);
}
this.text = BI.createWidget({ this.text = BI.createWidget({
type: "bi.label", type: "bi.label",
text: o.text, text: o.text,
textWidth: BI.isNotNull(o.textWidth) ? o.textWidth - this._const.iconWidth : null, whiteSpace: o.whiteSpace,
textAlign: o.textAlign,
textWidth: textWidth,
textHeight: textHeight, textHeight: textHeight,
height: lineHeight, height: lineHeight,
value: o.value value: o.value,
title: null
}); });
var layoutType = "bi.horizontal"; var layoutType = "bi.horizontal";
var gapContainer = { var gapContainer = {
@ -112,13 +125,14 @@
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.createWidget({ BI.createWidget({
type: "bi.center_adapt", type: "bi.center_adapt",
element: this, element: this,
@ -131,26 +145,7 @@
items: items items: items
}] }]
}); });
} else {
this.text = BI.createWidget({
type: "bi.label",
height: o.height,
textAlign: o.textAlign,
whiteSpace: o.whiteSpace,
textWidth: o.textWidth,
textHeight: textHeight,
hgap: o.hgap,
vgap: o.vgap,
tgap: o.tgap,
bgap: o.bgap,
lgap: o.lgap,
rgap: o.rgap,
element: this,
text: o.text,
value: o.value,
title: null,
});
}
var classArr = ["block", "clear", "ghost", "plain", "loading", "light"]; var classArr = ["block", "clear", "ghost", "plain", "loading", "light"];
// 如果 options 对应的属性为 true 则给元素添加 class // 如果 options 对应的属性为 true 则给元素添加 class
BI.each(classArr, function (_, clz) { BI.each(classArr, function (_, clz) {
@ -160,7 +155,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});
} }
}, },
@ -180,12 +175,27 @@
} }
}, },
setLoading: function (loading) { beforeClick: function () {
if (loading) { return this.isLoading();
},
isLoading() {
return this._loading === undefined ? this.options.loading : this._loading;
},
loading: function (loading) {
this._loading = true;
this.element.addClass("loading"); this.element.addClass("loading");
} else { // loadingCls 可以覆盖 iconCls 所以不需要移除 iconCls
this.icon.element.addClass(loadingCls);
this.icon.setVisible(true);
},
loaded() {
this._loading = false;
this.element.removeClass("loading"); this.element.removeClass("loading");
} this.icon.element.removeClass(loadingCls);
this.icon.setVisible(!!this.options.iconCls);
}, },
setText: function (text) { setText: function (text) {

3
src/less/base/single/button/button.less

@ -14,6 +14,9 @@ body .bi-button, #body .bi-button {
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
&.loading {
cursor: not-allowed;
}
&.block { &.block {
font-size: inherit; font-size: inherit;
border-width: 0; border-width: 0;

1
src/less/lib/font.less

@ -1,4 +1,5 @@
//字体库 //字体库
@font-button-loading: "e7cd";
@font-cross: "e1ab"; @font-cross: "e1ab";

4
src/less/resource/font.less

@ -81,6 +81,10 @@
.font-hover(pull-down-h-font, @font-down-triangle, @color-bi-text-light-gray); .font-hover(pull-down-h-font, @font-down-triangle, @color-bi-text-light-gray);
.font-hover-active(pull-down-ha-font, @font-down-triangle, @color-bi-text-light-gray); .font-hover-active(pull-down-ha-font, @font-down-triangle, @color-bi-text-light-gray);
// button
.font(button-loading-font, @font-button-loading);
//toast //toast
.font(toast-error-font, @font-tip-error, @color-bi-color-toast-error); .font(toast-error-font, @font-tip-error, @color-bi-color-toast-error);
.font(toast-success-font, @font-tip-success, @color-bi-color-toast-success); .font(toast-success-font, @font-tip-success, @color-bi-color-toast-success);

Loading…
Cancel
Save