diff --git a/demo/js/base/button/demo.button.js b/demo/js/base/button/demo.button.js index 400559566..110431afb 100644 --- a/demo/js/base/button/demo.button.js +++ b/demo/js/base/button/demo.button.js @@ -256,6 +256,17 @@ Demo.Button = BI.inherit(BI.Widget, { iconGap: 24, iconPosition: "top" } + },{ + el: { + type: "bi.button", + text: "自动撑开高度", + iconCls: "close-font", + textHeight: 32, + iconGap: 24, + vgap: 16, + hgap: 100, + iconPosition: "top" + } }, { el: { type: "bi.button", @@ -376,6 +387,21 @@ Demo.Button = BI.inherit(BI.Widget, { plain: true, disabled: true } + }, { + el: { + type: "bi.button", + iconCls: "plus-font", + text: "点我,更改图标", + handler() { + 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) { + this.i = 0; + } + this.setIcon(arr[this.i]); + }, + height: 24 + } }]; // BI.each(items, function (i, item) { // item.el.handler = function () { diff --git a/package.json b/package.json index 84cbf8cc1..b80b3cd54 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fineui", - "version": "2.0.20220621140421", + "version": "2.0.20220623154535", "description": "fineui", "main": "dist/fineui.min.js", "types": "dist/lib/index.d.ts", diff --git a/src/base/single/button/buttons/button.js b/src/base/single/button/buttons/button.js index 78e910f7c..d7f875b8f 100644 --- a/src/base/single/button/buttons/button.js +++ b/src/base/single/button/buttons/button.js @@ -14,20 +14,29 @@ BI.Button = BI.inherit(BI.BasicButton, { _const: { - iconWidth: 16 + iconWidth: 18 }, _defaultConfig: function (props) { 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, { baseCls: (conf.baseCls || "") + " bi-button" + ((BI.isIE() && BI.isIE9Below()) ? " hack" : ""), attributes: { tabIndex: 1 }, minWidth: (props.block === true || props.clear === true) ? 0 : 80, - // 44 = 垂直间距 6 + 边框 2 + 图标 16 + 图标和文字间隔 8 + 文字 12 - height: isVertical(props.iconPosition) ? 44 + ((props.iconGap || 8) - 8) : 24, + height: isVertical(props.iconPosition) ? adaptiveHeight : 24, shadow: props.clear !== true, isShadowShowingOnSelected: true, readonly: true, @@ -49,7 +58,7 @@ bgap: 0, lgap: 0, rgap: 0, - iconGap: 8, + iconGap: 4, iconPosition: "left" }); }, @@ -81,7 +90,10 @@ cls: o.iconCls, width: this._const.iconWidth, height: lineHeight, - lineHeight: lineHeight + lineHeight: lineHeight, + // 不设置,自定义按钮无法居中 + iconWidth: o.iconWidth, + iconHeight: o.iconHeight }); this.text = BI.createWidget({ type: "bi.label", @@ -195,6 +207,14 @@ } }, + setIcon: function (cls) { + var o = this.options; + if (this.icon && o.iconCls !== cls) { + this.icon.element.removeClass(o.iconCls).addClass(cls); + o.iconCls = cls; + } + }, + doRedMark: function () { this.text.doRedMark.apply(this.text, arguments); }, diff --git a/src/less/image.less b/src/less/image.less index bd2bcfabc..34be5fe1d 100644 --- a/src/less/image.less +++ b/src/less/image.less @@ -333,7 +333,7 @@ @font-face { font-family: "@{name}"; src: url('@{fontUrl}iconfont.eot'); - src: url('@{fontUrl}iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('@{fontUrl}iconfont.woff') format('woff'), /* chrome、firefox */ url('@{fontUrl}iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('@{fontUrl}iconfont.svg#svgFontName') format('svg'); /* iOS 4.1- */ + src: url('@{fontUrl}iconfont.woff') format('woff'), /* chrome、firefox */ url('@{fontUrl}iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('@{fontUrl}iconfont.svg#svgFontName') format('svg'); /* iOS 4.1- */ } }