|
|
@ -71,6 +71,35 @@ |
|
|
|
render: function () { |
|
|
|
render: function () { |
|
|
|
var o = this.options, self = this; |
|
|
|
var o = this.options, self = this; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// bi.center_adapt 作用:让 hgap 不影响 iconGap。
|
|
|
|
|
|
|
|
BI.createWidget({ |
|
|
|
|
|
|
|
type: "bi.center_adapt", |
|
|
|
|
|
|
|
horizontalAlign: o.textAlign, |
|
|
|
|
|
|
|
element: this, |
|
|
|
|
|
|
|
ref: (ref) => { |
|
|
|
|
|
|
|
self.containerRef = ref; |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
hgap: o.hgap, |
|
|
|
|
|
|
|
vgap: o.vgap, |
|
|
|
|
|
|
|
items: self.generateItems() |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 如果 options 对应的属性为 true 则给元素添加 class
|
|
|
|
|
|
|
|
var classArr = ["block", "clear", "ghost", "plain", "loading", "light"]; |
|
|
|
|
|
|
|
BI.each(classArr, function (_, clz) { |
|
|
|
|
|
|
|
if (BI.get(o, clz) === true) { |
|
|
|
|
|
|
|
self.element.addClass(clz); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (o.minWidth > 0) { |
|
|
|
|
|
|
|
this.element.css({ "min-width": BI.pixFormat(o.minWidth) }); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
generateItems(defaultRenderIcon) { |
|
|
|
|
|
|
|
var o = this.options; |
|
|
|
|
|
|
|
|
|
|
|
// 由于button默认情况下有个边框,所以要主动算行高
|
|
|
|
// 由于button默认情况下有个边框,所以要主动算行高
|
|
|
|
var lineHeight, textHeight = o.textHeight; |
|
|
|
var lineHeight, textHeight = o.textHeight; |
|
|
|
var hasBorder = false |
|
|
|
var hasBorder = false |
|
|
@ -90,7 +119,32 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
var iconInvisible = !o.loading && !o.iconCls && !o.icon; |
|
|
|
var iconInvisible = !(o.loading || o.iconCls || o.icon || defaultRenderIcon); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var textWidth = o.textWidth; |
|
|
|
|
|
|
|
if (BI.isNull(o.textWidth)) { |
|
|
|
|
|
|
|
textWidth = (o.minWidth > 0 && o.width < o.minWidth) ? o.minWidth : o.width; |
|
|
|
|
|
|
|
textWidth -= (o.hgap * 2 + o.iconGap) |
|
|
|
|
|
|
|
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: BI.toPix(textHeight, hasBorder ? 2 : 0), |
|
|
|
|
|
|
|
height: BI.toPix(lineHeight, hasBorder ? 2 : 0), |
|
|
|
|
|
|
|
value: o.value, |
|
|
|
|
|
|
|
title: null, |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (iconInvisible) { |
|
|
|
|
|
|
|
return [this.text] |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this._iconRendered = true; |
|
|
|
|
|
|
|
|
|
|
|
if (BI.isPlainObject(o.icon) && !o.loading) { |
|
|
|
if (BI.isPlainObject(o.icon) && !o.loading) { |
|
|
|
this.icon = BI.createWidget(o.icon); |
|
|
|
this.icon = BI.createWidget(o.icon); |
|
|
|
} else { |
|
|
|
} else { |
|
|
@ -107,64 +161,24 @@ |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 用户可能设置的 width 小于按钮的最小宽度
|
|
|
|
|
|
|
|
var actualWidth = (o.minWidth > 0 && o.width < o.minWidth) ? o.minWidth : o.width; |
|
|
|
|
|
|
|
var textWidth = iconInvisible && o.width ? actualWidth - 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: BI.toPix(textHeight, hasBorder ? 2 : 0), |
|
|
|
|
|
|
|
height: BI.toPix(lineHeight, hasBorder ? 2 : 0), |
|
|
|
|
|
|
|
value: o.value, |
|
|
|
|
|
|
|
title: null, |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
var layoutType = "bi.horizontal"; |
|
|
|
|
|
|
|
var gapContainer = { |
|
|
|
var gapContainer = { |
|
|
|
lgap: o.iconPosition === "left" && o.text ? o.iconGap : 0, |
|
|
|
lgap: o.iconPosition === "left" && o.text ? o.iconGap : 0, |
|
|
|
rgap: o.iconPosition === "right" ? o.iconGap : 0, |
|
|
|
rgap: o.iconPosition === "right" ? o.iconGap : 0, |
|
|
|
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)]; |
|
|
|
|
|
|
|
if (isVertical(o.iconPosition)) { |
|
|
|
var items = [this.icon, BI.extend({ el: this.text }, gapContainer)]; |
|
|
|
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.reverse(); |
|
|
|
} |
|
|
|
} |
|
|
|
// bi.center_adapt 作用:让 hgap 不影响 iconGap。
|
|
|
|
|
|
|
|
BI.createWidget({ |
|
|
|
return [{ |
|
|
|
type: "bi.center_adapt", |
|
|
|
type: isVertical(o.iconPosition) ? "bi.vertical" : "bi.horizontal", |
|
|
|
horizontalAlign: o.textAlign, |
|
|
|
|
|
|
|
element: this, |
|
|
|
|
|
|
|
hgap: o.hgap, |
|
|
|
|
|
|
|
vgap: o.vgap, |
|
|
|
|
|
|
|
items: [{ |
|
|
|
|
|
|
|
type: layoutType, |
|
|
|
|
|
|
|
horizontalAlign: "center", |
|
|
|
horizontalAlign: "center", |
|
|
|
verticalAlign: "middle", |
|
|
|
verticalAlign: "middle", |
|
|
|
items: items, |
|
|
|
items, |
|
|
|
}], |
|
|
|
}]; |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var classArr = ["block", "clear", "ghost", "plain", "loading", "light"]; |
|
|
|
|
|
|
|
// 如果 options 对应的属性为 true 则给元素添加 class
|
|
|
|
|
|
|
|
BI.each(classArr, function (_, clz) { |
|
|
|
|
|
|
|
if (BI.get(o, clz) === true) { |
|
|
|
|
|
|
|
self.element.addClass(clz); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (o.minWidth > 0) { |
|
|
|
|
|
|
|
this.element.css({ "min-width": BI.pixFormat(o.minWidth) }); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
doClick: function () { |
|
|
|
doClick: function () { |
|
|
@ -194,6 +208,7 @@ |
|
|
|
loading: function () { |
|
|
|
loading: function () { |
|
|
|
this._loading = true; |
|
|
|
this._loading = true; |
|
|
|
this.element.addClass("loading"); |
|
|
|
this.element.addClass("loading"); |
|
|
|
|
|
|
|
!this._iconRendered && this.containerRef.populate(this.generateItems(true)); |
|
|
|
if (this.icon.loading) { |
|
|
|
if (this.icon.loading) { |
|
|
|
this.icon.loading(); |
|
|
|
this.icon.loading(); |
|
|
|
} else { |
|
|
|
} else { |
|
|
@ -228,6 +243,7 @@ |
|
|
|
|
|
|
|
|
|
|
|
setIcon: function (cls) { |
|
|
|
setIcon: function (cls) { |
|
|
|
var o = this.options; |
|
|
|
var o = this.options; |
|
|
|
|
|
|
|
!this._iconRendered && this.containerRef.populate(this.generateItems(true)); |
|
|
|
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; |
|
|
|