Browse Source

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

* commit '8b4f01452b7149fd59b2bbf38994c5c2a177e385':
  KERNEL-12202 fix:加一个 beforeClick 的注释
  KERNEL-12202 fix:把comsume换成isIntercepted
  KERNEL-12202 fix:setLoading改为loading
  KERNEL-12202 按钮支持 loading
es6
superman 2 years ago
parent
commit
8641e94004
  1. 70
      demo/js/base/button/demo.button.js
  2. 10
      src/base/single/button/button.basic.js
  3. 70
      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

70
demo/js/base/button/demo.button.js

@ -5,9 +5,18 @@ Demo.Button = BI.inherit(BI.Widget, {
render: function () {
var items = [{
type: "bi.button",
text: "一般按钮",
text: "一般按钮1111111111111",
level: "common",
height: 30
whiteSpace: "nowrap",
width: 100,
height: 30,
handler() {
console.log("触发点击事件");
this.loading();
setTimeout(() => {
this.loaded();
}, 5 * 1000);
}
}, {
type: "bi.button",
text: "表示成功状态按钮",
@ -190,19 +199,14 @@ Demo.Button = BI.inherit(BI.Widget, {
height: 30
}, {
type: "bi.button",
text: "图标在上面的按钮,而且可以自动撑开高度",
iconCls: "close-font",
iconGap: 24,
iconPosition: "top"
},{
type: "bi.button",
text: "自动撑开高度",
text: "自动撑开",
iconCls: "close-font",
textHeight: 32,
iconGap: 24,
// textHeight: 32,
// height: 32,
iconGap: 64,
vgap: 16,
hgap: 100,
iconPosition: "top"
iconPosition: "bottom"
}, {
type: "bi.button",
text: "图标在下面的按钮",
@ -296,6 +300,46 @@ Demo.Button = BI.inherit(BI.Widget, {
this.setIcon(arr[this.i]);
},
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 {
@ -306,7 +350,7 @@ Demo.Button = BI.inherit(BI.Widget, {
items: BI.map(items, function (index, value) {
return {
el: value
}
};
})
};
}

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

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

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

@ -3,6 +3,8 @@
return position === "top" || position === "bottom";
}
var loadingCls = "button-loading-font anim-rotate";
/**
* 文字类型的按钮
* @class BI.Button
@ -54,7 +56,7 @@
whiteSpace: "nowrap",
textWidth: null,
textHeight: null,
hgap: props.clear ? 0 : 10,
hgap: props.clear ? 0 : (props.plain && !props.text ? 4 : 10),
vgap: 0,
tgap: 0,
bgap: 0,
@ -86,24 +88,35 @@
textHeight = lineHeight;
}
}
if (BI.isKey(o.iconCls)) {
var iconInvisible = !o.loading && !o.iconCls;
this.icon = BI.createWidget({
type: "bi.icon_label",
cls: o.iconCls,
cls: o.loading ? loadingCls : o.iconCls,
width: this._const.iconWidth,
height: lineHeight,
lineHeight: lineHeight,
// 不设置,自定义按钮无法居中
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({
type: "bi.label",
text: o.text,
textWidth: BI.isNotNull(o.textWidth) ? o.textWidth - this._const.iconWidth : null,
whiteSpace: o.whiteSpace,
textAlign: o.textAlign,
textWidth: textWidth,
textHeight: textHeight,
height: lineHeight,
value: o.value
value: o.value,
title: null
});
var layoutType = "bi.horizontal";
var gapContainer = {
@ -119,6 +132,7 @@
if (o.iconPosition === "right" || o.iconPosition === "bottom") {
items = [BI.extend({el: this.text}, gapContainer), this.icon];
}
// bi.center_adapt 作用:让 hgap 不影响 iconGap。
BI.createWidget({
type: "bi.center_adapt",
element: this,
@ -131,26 +145,7 @@
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"];
// 如果 options 对应的属性为 true 则给元素添加 class
BI.each(classArr, function (_, clz) {
@ -180,12 +175,27 @@
}
},
setLoading: function (loading) {
if (loading) {
beforeClick: function () {
return this.isLoading();
},
isLoading() {
return this._loading === undefined ? this.options.loading : this._loading;
},
loading: function (loading) {
this._loading = true;
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.icon.element.removeClass(loadingCls);
this.icon.setVisible(!!this.options.iconCls);
},
setText: function (text) {

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

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

1
src/less/lib/font.less

@ -1,4 +1,5 @@
//字体库
@font-button-loading: "e7cd";
@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-active(pull-down-ha-font, @font-down-triangle, @color-bi-text-light-gray);
// button
.font(button-loading-font, @font-button-loading);
//toast
.font(toast-error-font, @font-tip-error, @color-bi-color-toast-error);
.font(toast-success-font, @font-tip-success, @color-bi-color-toast-success);

Loading…
Cancel
Save