Browse Source

Merge branch 'master' of ssh://code.fineres.com:7999/~dailer/fineui

es6
zsmj 2 years ago
parent
commit
dfc22c2c97
  1. 74
      demo/js/base/button/demo.button.js
  2. 2
      package.json
  3. 10
      src/base/single/button/button.basic.js
  4. 154
      src/base/single/button/buttons/button.js
  5. 2
      src/core/4.widget.js
  6. 3
      src/less/base/single/button/button.less
  7. 2
      src/less/image.less
  8. 1
      src/less/lib/font.less
  9. 4
      src/less/resource/font.less

74
demo/js/base/button/demo.button.js

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

2
package.json

@ -1,6 +1,6 @@
{
"name": "fineui",
"version": "2.0.20220727111551",
"version": "2.0.20220728161422",
"description": "fineui",
"main": "dist/fineui_without_conflict.min.js",
"types": "dist/lib/index.d.ts",

10
src/base/single/button/button.basic.js

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

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

2
src/core/4.widget.js

@ -225,7 +225,7 @@
if (BI.isFunction(o.css)) {
var css = this.__watch(o.css, function (context, newValue) {
for (var k in css) {
if (!newValue[k]) {
if (BI.isNull(newValue[k])) {
newValue[k] = "";
}
}

3
src/less/base/single/button/button.less

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

2
src/less/image.less

@ -333,7 +333,7 @@
@font-face {
font-family: "@{name}";
src: url('@{fontUrl}iconfont.eot');
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- */
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- */
}
}

1
src/less/lib/font.less

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

4
src/less/resource/font.less

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

Loading…
Cancel
Save