Frank
/
fineui
forked from fanruan/fineui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

es6
zsmj 2 years ago
parent
5ad1408774 76b14245f3
commit
dfc22c2c97
9 changed files with 161 additions and 91 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

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

4
src/less/resource/font.less
Unescape View File

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

Write Preview
Loading…
Cancel
Save