fanruan
/
fineui
4
1
Fork 3
Code Issues 1 Pull Requests Releases Wiki Activity
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
0728418ce8 8b4f01452b
commit
8641e94004
6 changed files with 158 additions and 88 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. 74
      demo/js/base/button/demo.button.js
  2. 10
      src/base/single/button/button.basic.js
  3. 154
      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

74
demo/js/base/button/demo.button.js
Unescape View File

@ -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: "图标在下面的按钮",
@ -288,14 +292,54 @@ Demo.Button = BI.inherit(BI.Widget, {
iconCls: "plus-font",
text: "点我，更改图标",
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"];
if(this.i >= arr.length) {
if (this.i >= arr.length) {
this.i = 0;
}
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
Unescape View File

@ -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 () {
},

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

@ -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,71 +88,64 @@
textHeight = lineHeight;
}
}
if (BI.isKey(o.iconCls)) {
this.icon = BI.createWidget({
type: "bi.icon_label",
cls: o.iconCls,
width: this._const.iconWidth,
height: lineHeight,
lineHeight: lineHeight,
// 不设置，自定义按钮无法居中
iconWidth: o.iconWidth,
iconHeight: o.iconHeight
});
this.text = BI.createWidget({
type: "bi.label",
text: o.text,
textWidth: BI.isNotNull(o.textWidth) ? o.textWidth - this._const.iconWidth : null,
textHeight: textHeight,
height: lineHeight,
value: o.value
});
var layoutType = "bi.horizontal";
var gapContainer = {
lgap: o.iconPosition === "left" && o.text ? o.iconGap : 0,
rgap: o.iconPosition === "right" ? o.iconGap : 0,
tgap: o.iconPosition === "top" ? o.iconGap : 0,
bgap: o.iconPosition === "bottom" ? o.iconGap : 0
};
var items = [this.icon, BI.extend({ el: this.text }, gapContainer)];
if (isVertical(o.iconPosition)) {
layoutType = "bi.vertical";
}
if (o.iconPosition === "right" || o.iconPosition === "bottom") {
items = [BI.extend({ el: this.text }, gapContainer), this.icon];
}
BI.createWidget({
type: "bi.center_adapt",
element: this,
hgap: o.hgap,
vgap: o.vgap,
items: [{
type: layoutType,
horizontalAlign: "center",
verticalAlign: "middle",
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 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
});
// 用于 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,
whiteSpace: o.whiteSpace,
textAlign: o.textAlign,
textWidth: textWidth,
textHeight: textHeight,
height: lineHeight,
value: o.value,
title: null
});
var layoutType = "bi.horizontal";
var gapContainer = {
lgap: o.iconPosition === "left" && o.text ? o.iconGap : 0,
rgap: o.iconPosition === "right" ? o.iconGap : 0,
tgap: o.iconPosition === "top" ? o.iconGap : 0,
bgap: o.iconPosition === "bottom" ? o.iconGap : 0
};
var items = [this.icon, BI.extend({el: this.text}, gapContainer)];
if (isVertical(o.iconPosition)) {
layoutType = "bi.vertical";
}
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,
hgap: o.hgap,
vgap: o.vgap,
items: [{
type: layoutType,
horizontalAlign: "center",
verticalAlign: "middle",
items: items
}]
});
var classArr = ["block", "clear", "ghost", "plain", "loading", "light"];
// 如果 options 对应的属性为 true 则给元素添加 class
BI.each(classArr, function (_, clz) {
@ -160,7 +155,7 @@
});
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) {
if (loading) {
this.element.addClass("loading");
} else {
this.element.removeClass("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");
// 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
Unescape View File

@ -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
Unescape View File

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

4
src/less/resource/font.less
Unescape View File

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

Write Preview
Loading…
Cancel
Save