caoww
/
fineui
forked from fanruan/fineui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Pull request #2726: DESIGN-4069 【组件化】反馈-按钮 

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

* commit 'dceef8f14e07e0ceb05e23b6295ecdb4fda45573':
  ddd8fcf - DESIGN-4069 fix: 删除了 iconSize 属性，增加了按钮的 loading 状态
  DESIGN-4069 fix: 按钮增加闭包
  DESIGN-4069 【组件化】反馈-按钮
es6
treecat 3 years ago
parent
35a1325554 dceef8f14e
commit
7b5a23e098
2 changed files with 223 additions and 155 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 31
      demo/js/base/button/demo.button.js
  2. 347
      src/base/single/button/buttons/button.js

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

@ -213,6 +213,35 @@ Demo.Button = BI.inherit(BI.Widget, {
}, },
height: 30 height: 30
} }
}, {
el: {
type: "bi.button",
text: "图标在上面的按钮，而且可以自动撑开高度",
iconCls: "close-font",
iconGap: 24,
iconPosition: "top"
}
}, {
el: {
type: "bi.button",
text: "图标在下面的按钮",
iconCls: "close-font",
iconPosition: "bottom"
}
}, {
el: {
type: "bi.button",
text: "图标在左边的按钮",
iconCls: "close-font",
iconPosition: "left"
}
}, {
el: {
type: "bi.button",
text: "图标在右边的按钮",
iconCls: "close-font",
iconPosition: "right"
}
}]; }];
// BI.each(items, function (i, item) { // BI.each(items, function (i, item) {
// item.el.handler = function () { // item.el.handler = function () {
@ -228,4 +257,4 @@ Demo.Button = BI.inherit(BI.Widget, {
}; };
} }
}); });
BI.shortcut("demo.button", Demo.Button); BI.shortcut("demo.button", Demo.Button);

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

@ -1,169 +1,208 @@
/** (function () {
* 文字类型的按钮 function isVertical(position) {
* @class BI.Button return position === "top" || position === "bottom";
* @extends BI.BasicButton }
*
* @cfg {JSON} options 配置属性 /**
* @cfg {'common'/'success'/'warning'/'ignore'} [options.level='common'] 按钮类型，用不同颜色强调不同的场景 * 文字类型的按钮
*/ * @class BI.Button
BI.Button = BI.inherit(BI.BasicButton, { * @extends BI.BasicButton
*
* @cfg {JSON} options 配置属性
* @cfg {'common'/'success'/'warning'/'ignore'} [options.level='common'] 按钮类型，用不同颜色强调不同的场景
*/
BI.Button = BI.inherit(BI.BasicButton, {
_const: { _const: {
iconWidth: 18 iconWidth: 16
}, },
_defaultConfig: function (props) { _defaultConfig: function (props) {
var conf = BI.Button.superclass._defaultConfig.apply(this, arguments); var conf = BI.Button.superclass._defaultConfig.apply(this, arguments);
return BI.extend(conf, {
baseCls: (conf.baseCls || "") + " bi-button" + ((BI.isIE() && BI.isIE9Below()) ? " hack" : ""), return BI.extend(conf, {
attributes: { baseCls: (conf.baseCls || "") + " bi-button" + ((BI.isIE() && BI.isIE9Below()) ? " hack" : ""),
tabIndex: 1 attributes: {
}, tabIndex: 1
minWidth: (props.block === true || props.clear === true) ? 0 : 80, },
height: 24, minWidth: (props.block === true || props.clear === true) ? 0 : 80,
shadow: props.clear !== true, // 44 = 垂直间距 6 + 边框 2 + 图标 16 + 图标和文字间隔 8 + 文字 12
isShadowShowingOnSelected: true, height: isVertical(props.iconPosition) ? 44 + ((props.iconGap || 8) - 8) : 24,
readonly: true, shadow: props.clear !== true,
iconCls: "", isShadowShowingOnSelected: true,
level: "common", readonly: true,
block: false, // 是否块状显示，即不显示边框，没有最小宽度的限制 iconCls: "",
clear: false, // 是否去掉边框和背景 level: "common",
ghost: false, // 是否幽灵显示, 即正常状态无背景 block: false, // 是否块状显示，即不显示边框，没有最小宽度的限制
textAlign: "center", clear: false, // 是否去掉边框和背景
whiteSpace: "nowrap", ghost: false, // 是否幽灵显示, 即正常状态无背景
textWidth: null, loading: false, // 是否处于加载中
textHeight: null, textAlign: "center",
hgap: props.clear ? 0 : 10, whiteSpace: "nowrap",
vgap: 0, textWidth: null,
tgap: 0, textHeight: null,
bgap: 0, hgap: props.clear ? 0 : 10,
lgap: 0, vgap: 0,
rgap: 0 tgap: 0,
}); bgap: 0,
}, lgap: 0,
rgap: 0,
iconGap: 8,
iconPosition: "left"
});
},
render: function () { render: function () {
var o = this.options, self = this; var o = this.options;
// 由于button默认情况下有个边框，所以要主动算行高 // 由于button默认情况下有个边框，所以要主动算行高
var lineHeight, textHeight = o.textHeight; var lineHeight, textHeight = o.textHeight;
if (BI.isNumber(o.height)) { if (BI.isNumber(o.height)) {
if (o.clear || o.block) { if (!isVertical(o.iconPosition)) {
lineHeight = o.height; if (o.clear || o.block) {
lineHeight = o.height;
} else {
lineHeight = o.height - 2;
}
} else {
lineHeight = textHeight;
}
}
if (!textHeight) {
if (o.whiteSpace === "nowrap") {
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
});
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 { } else {
lineHeight = o.height - 2; 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
});
} }
} if (o.block === true) {
if (!textHeight) { this.element.addClass("block");
if (o.whiteSpace === "nowrap") {
textHeight = lineHeight;
} }
} if (o.clear === true) {
if (BI.isKey(o.iconCls)) { this.element.addClass("clear");
this.icon = BI.createWidget({ }
type: "bi.icon_label", if (o.ghost === true) {
cls: o.iconCls, this.element.addClass("ghost");
width: this._const.iconWidth, }
height: lineHeight, if (o.loading === true) {
lineHeight: lineHeight, this.element.addClass("loading");
iconWidth: o.iconWidth, }
iconHeight: o.iconHeight if (o.minWidth > 0) {
}); this.element.css({"min-width": o.minWidth / BI.pixRatio + BI.pixUnit});
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
});
BI.createWidget({
type: "bi.center_adapt",
element: this,
hgap: o.hgap,
vgap: o.vgap,
items: [{
type: "bi.horizontal",
columnSize: ["", "fill"],
items: [this.icon, this.text]
}]
});
} 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
});
}
if (o.block === true) {
this.element.addClass("block");
}
if (o.clear === true) {
this.element.addClass("clear");
}
if (o.ghost === true) {
this.element.addClass("ghost");
}
if (o.minWidth > 0) {
this.element.css({"min-width": o.minWidth / BI.pixRatio + BI.pixUnit});
}
},
doClick: function () { doClick: function () {
BI.Button.superclass.doClick.apply(this, arguments); BI.Button.superclass.doClick.apply(this, arguments);
if (this.isValid()) { if (this.isValid()) {
this.fireEvent(BI.Button.EVENT_CHANGE, this); this.fireEvent(BI.Button.EVENT_CHANGE, this);
} }
}, },
_setEnable: function (enable) { _setEnable: function (enable) {
BI.Button.superclass._setEnable.apply(this, arguments); BI.Button.superclass._setEnable.apply(this, arguments);
if (enable === true) { if (enable === true) {
this.element.attr("tabIndex", 1); this.element.attr("tabIndex", 1);
} else if (enable === false) { } else if (enable === false) {
this.element.removeAttr("tabIndex"); this.element.removeAttr("tabIndex");
} }
}, },
setText: function (text) { setLoading: function (loading) {
BI.Button.superclass.setText.apply(this, arguments); if(loading) {
this.text.setText(text); this.element.addClass("loading");
}, } else {
this.element.removeClass("loading");
}
},
setValue: function (text) { setText: function (text) {
BI.Button.superclass.setValue.apply(this, arguments); BI.Button.superclass.setText.apply(this, arguments);
if (!this.isReadOnly()) { this.text.setText(text);
this.text.setValue(text); },
}
},
doRedMark: function () { setValue: function (text) {
this.text.doRedMark.apply(this.text, arguments); BI.Button.superclass.setValue.apply(this, arguments);
}, if (!this.isReadOnly()) {
this.text.setValue(text);
}
},
unRedMark: function () { doRedMark: function () {
this.text.unRedMark.apply(this.text, arguments); this.text.doRedMark.apply(this.text, arguments);
}, },
doHighLight: function () { unRedMark: function () {
this.text.doHighLight.apply(this.text, arguments); this.text.unRedMark.apply(this.text, arguments);
}, },
unHighLight: function () { doHighLight: function () {
this.text.unHighLight.apply(this.text, arguments); this.text.doHighLight.apply(this.text, arguments);
} },
});
BI.shortcut("bi.button", BI.Button); unHighLight: function () {
BI.Button.EVENT_CHANGE = "EVENT_CHANGE"; this.text.unHighLight.apply(this.text, arguments);
}
});
BI.shortcut("bi.button", BI.Button);
BI.Button.EVENT_CHANGE = "EVENT_CHANGE";
}());

Write Preview
Loading…
Cancel
Save