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 () { render: function () {
var items = [{ var items = [{
type: "bi.button", type: "bi.button",
text: "一般按钮", text: "一般按钮1111111111111",
level: "common", level: "common",
height: 30 whiteSpace: "nowrap",
width: 100,
height: 30,
handler() {
console.log("触发点击事件");
this.loading();
setTimeout(() => {
this.loaded();
}, 5 * 1000);
}
}, { }, {
type: "bi.button", type: "bi.button",
text: "表示成功状态按钮", text: "表示成功状态按钮",
@ -190,19 +199,14 @@ Demo.Button = BI.inherit(BI.Widget, {
height: 30 height: 30
}, { }, {
type: "bi.button", type: "bi.button",
text: "图标在上面的按钮,而且可以自动撑开高度", text: "自动撑开",
iconCls: "close-font",
iconGap: 24,
iconPosition: "top"
},{
type: "bi.button",
text: "自动撑开高度",
iconCls: "close-font", iconCls: "close-font",
textHeight: 32, // textHeight: 32,
iconGap: 24, // height: 32,
iconGap: 64,
vgap: 16, vgap: 16,
hgap: 100, hgap: 100,
iconPosition: "top" iconPosition: "bottom"
}, { }, {
type: "bi.button", type: "bi.button",
text: "图标在下面的按钮", text: "图标在下面的按钮",
@ -288,14 +292,54 @@ Demo.Button = BI.inherit(BI.Widget, {
iconCls: "plus-font", iconCls: "plus-font",
text: "点我,更改图标", text: "点我,更改图标",
handler() { 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"]; 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.i = 0;
} }
this.setIcon(arr[this.i]); this.setIcon(arr[this.i]);
}, },
height: 24 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 { return {
@ -306,7 +350,7 @@ Demo.Button = BI.inherit(BI.Widget, {
items: BI.map(items, function (index, value) { items: BI.map(items, function (index, value) {
return { return {
el: value el: value
} };
}) })
}; };
} }

2
package.json

@ -1,6 +1,6 @@
{ {
"name": "fineui", "name": "fineui",
"version": "2.0.20220727111551", "version": "2.0.20220728161422",
"description": "fineui", "description": "fineui",
"main": "dist/fineui_without_conflict.min.js", "main": "dist/fineui_without_conflict.min.js",
"types": "dist/lib/index.d.ts", "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) { _doClick: function (e) {
if (this.isValid()) { if (this.isValid()) {
this.beforeClick(e); var isIntercepted = this.beforeClick(e);
// 如果事件已经被消费掉了,就不再触发点击事件
if (isIntercepted) {
return;
}
} }
this._trigger(e); this._trigger(e);
if (this.isValid()) { if (this.isValid()) {
this.doClick(e); this.doClick(e);
} }
}, },
/**
* 子类可以得写这个方法如果返回为 true则可以阻止 handler 的触发
*/
beforeClick: function () { beforeClick: function () {
}, },

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

@ -3,6 +3,8 @@
return position === "top" || position === "bottom"; return position === "top" || position === "bottom";
} }
var loadingCls = "button-loading-font anim-rotate";
/** /**
* 文字类型的按钮 * 文字类型的按钮
* @class BI.Button * @class BI.Button
@ -54,7 +56,7 @@
whiteSpace: "nowrap", whiteSpace: "nowrap",
textWidth: null, textWidth: null,
textHeight: null, textHeight: null,
hgap: props.clear ? 0 : 10, hgap: props.clear ? 0 : (props.plain && !props.text ? 4 : 10),
vgap: 0, vgap: 0,
tgap: 0, tgap: 0,
bgap: 0, bgap: 0,
@ -86,71 +88,64 @@
textHeight = lineHeight; textHeight = lineHeight;
} }
} }
if (BI.isKey(o.iconCls)) {
this.icon = BI.createWidget({ var iconInvisible = !o.loading && !o.iconCls;
type: "bi.icon_label", this.icon = BI.createWidget({
cls: o.iconCls, type: "bi.icon_label",
width: this._const.iconWidth, cls: o.loading ? loadingCls : o.iconCls,
height: lineHeight, width: this._const.iconWidth,
lineHeight: lineHeight, height: lineHeight,
// 不设置,自定义按钮无法居中 lineHeight: lineHeight,
iconWidth: o.iconWidth, // 不设置,自定义按钮无法居中
iconHeight: o.iconHeight iconWidth: o.iconWidth,
}); iconHeight: o.iconHeight,
this.text = BI.createWidget({ invisible: iconInvisible
type: "bi.label", });
text: o.text, // 用于 whiteSpace
textWidth: BI.isNotNull(o.textWidth) ? o.textWidth - this._const.iconWidth : null, var textWidth = iconInvisible && o.width ? o.width - o.hgap * 2 : null;
textHeight: textHeight, if (BI.isNotNull(o.textWidth)) {
height: lineHeight, // textWidth 需要减去图标
value: o.value textWidth = o.textWidth - (iconInvisible || isVertical(o.iconPosition) ? 0 : this._const.iconWidth);
});
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,
});
} }
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"]; var classArr = ["block", "clear", "ghost", "plain", "loading", "light"];
// 如果 options 对应的属性为 true 则给元素添加 class // 如果 options 对应的属性为 true 则给元素添加 class
BI.each(classArr, function (_, clz) { BI.each(classArr, function (_, clz) {
@ -160,7 +155,7 @@
}); });
if (o.minWidth > 0) { 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) { beforeClick: function () {
if (loading) { return this.isLoading();
this.element.addClass("loading"); },
} else {
this.element.removeClass("loading"); 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) { setText: function (text) {

2
src/core/4.widget.js

@ -225,7 +225,7 @@
if (BI.isFunction(o.css)) { if (BI.isFunction(o.css)) {
var css = this.__watch(o.css, function (context, newValue) { var css = this.__watch(o.css, function (context, newValue) {
for (var k in css) { for (var k in css) {
if (!newValue[k]) { if (BI.isNull(newValue[k])) {
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; text-align: center;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
&.loading {
cursor: not-allowed;
}
&.block { &.block {
font-size: inherit; font-size: inherit;
border-width: 0; border-width: 0;

2
src/less/image.less

@ -333,7 +333,7 @@
@font-face { @font-face {
font-family: "@{name}"; font-family: "@{name}";
src: url('@{fontUrl}iconfont.eot'); 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"; @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(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); .font-hover-active(pull-down-ha-font, @font-down-triangle, @color-bi-text-light-gray);
// button
.font(button-loading-font, @font-button-loading);
//toast //toast
.font(toast-error-font, @font-tip-error, @color-bi-color-toast-error); .font(toast-error-font, @font-tip-error, @color-bi-color-toast-error);
.font(toast-success-font, @font-tip-success, @color-bi-color-toast-success); .font(toast-success-font, @font-tip-success, @color-bi-color-toast-success);

Loading…
Cancel
Save