Browse Source

REPORT-74080 fix: 修复自定义图标无法居中,调整了撑开的公式

research/test
treecat 2 years ago
parent
commit
2ee2fa945d
  1. 11
      demo/js/base/button/demo.button.js
  2. 24
      src/base/single/button/buttons/button.js

11
demo/js/base/button/demo.button.js

@ -256,6 +256,17 @@ Demo.Button = BI.inherit(BI.Widget, {
iconGap: 24, iconGap: 24,
iconPosition: "top" iconPosition: "top"
} }
},{
el: {
type: "bi.button",
text: "自动撑开高度",
iconCls: "close-font",
textHeight: 32,
iconGap: 24,
vgap: 16,
hgap: 100,
iconPosition: "top"
}
}, { }, {
el: { el: {
type: "bi.button", type: "bi.button",

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

@ -14,20 +14,29 @@
BI.Button = BI.inherit(BI.BasicButton, { BI.Button = BI.inherit(BI.BasicButton, {
_const: { _const: {
iconWidth: 16 iconWidth: 18
}, },
_defaultConfig: function (props) { _defaultConfig: function (props) {
var conf = BI.Button.superclass._defaultConfig.apply(this, arguments); var conf = BI.Button.superclass._defaultConfig.apply(this, arguments);
var adaptiveHeight = 0;
if (isVertical(props.iconPosition)) {
// 图标高度和文字高度默认相等
adaptiveHeight += (props.textHeight || 16) * 2;
adaptiveHeight += props.iconGap || 4;
var tGap = props.tgap || props.vgap || 2;
var bGap = props.bgap || props.vgap || 2;
adaptiveHeight += (tGap + bGap);
}
return BI.extend(conf, { return BI.extend(conf, {
baseCls: (conf.baseCls || "") + " bi-button" + ((BI.isIE() && BI.isIE9Below()) ? " hack" : ""), baseCls: (conf.baseCls || "") + " bi-button" + ((BI.isIE() && BI.isIE9Below()) ? " hack" : ""),
attributes: { attributes: {
tabIndex: 1 tabIndex: 1
}, },
minWidth: (props.block === true || props.clear === true) ? 0 : 80, minWidth: (props.block === true || props.clear === true) ? 0 : 80,
// 44 = 垂直间距 6 + 边框 2 + 图标 16 + 图标和文字间隔 8 + 文字 12 height: isVertical(props.iconPosition) ? adaptiveHeight : 24,
height: isVertical(props.iconPosition) ? 44 + ((props.iconGap || 8) - 8) : 24,
shadow: props.clear !== true, shadow: props.clear !== true,
isShadowShowingOnSelected: true, isShadowShowingOnSelected: true,
readonly: true, readonly: true,
@ -49,7 +58,7 @@
bgap: 0, bgap: 0,
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
iconGap: 8, iconGap: 4,
iconPosition: "left" iconPosition: "left"
}); });
}, },
@ -81,7 +90,10 @@
cls: o.iconCls, cls: o.iconCls,
width: this._const.iconWidth, width: this._const.iconWidth,
height: lineHeight, height: lineHeight,
lineHeight: lineHeight lineHeight: lineHeight,
// 不设置,自定义按钮无法居中
iconWidth: o.iconWidth,
iconHeight: o.iconHeight
}); });
this.text = BI.createWidget({ this.text = BI.createWidget({
type: "bi.label", type: "bi.label",
@ -197,7 +209,7 @@
setIcon: function (cls) { setIcon: function (cls) {
var o = this.options; var o = this.options;
if(this.icon && o.iconCls !== cls) { if (this.icon && o.iconCls !== cls) {
this.icon.element.removeClass(o.iconCls).addClass(cls); this.icon.element.removeClass(o.iconCls).addClass(cls);
o.iconCls = cls; o.iconCls = cls;
} }

Loading…
Cancel
Save