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
701ab5576f 6432871fc1
commit
9b84395cfb
3 changed files with 127 additions and 77 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 144
      demo/js/base/button/demo.button.js
  2. 2
      package.json
  3. 28
      src/base/single/button/buttons/button.js

144
demo/js/base/button/demo.button.js
Unescape View File

@ -1,6 +1,29 @@
(function () {
var JokerIcon = BI.inherit(BI.Widget, {
render: function () {
var self = this;
return {
type: "bi.label",
cls: "anim-rotate",
ref: function(ref) {
self.text = ref;
},
};
},
loading: function () {
this.text.setText("🤡");
},
loaded: function () {
this.text.setText("");
},
});
BI.shortcut("demo.joker.icon", JokerIcon);
}());
Demo.Button = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-button"
baseCls: "demo-button",
},
render: function () {
var items = [{
@ -16,187 +39,187 @@ Demo.Button = BI.inherit(BI.Widget, {
setTimeout(() => {
this.loaded();
}, 5 * 1000);
}
},
}, {
type: "bi.button",
text: "表示成功状态按钮",
level: "success",
height: 30
height: 30,
}, {
type: "bi.button",
text: "表示警告状态的按钮",
level: "warning",
height: 30
height: 30,
}, {
type: "bi.button",
text: "表示错误状态的按钮",
level: "error",
height: 30
height: 30,
}, {
type: "bi.button",
text: "表示忽略状态的按钮",
level: "ignore",
height: 30
height: 30,
}, {
type: "bi.button",
text: "普通灰化按钮",
disabled: true,
level: "success",
height: 30
height: 30,
}, {
type: "bi.button",
text: "忽略状态灰化按钮",
disabled: true,
level: "ignore",
height: 30
height: 30,
}, {
type: "bi.button",
text: "带图标的按钮",
// level: 'ignore',
iconCls: "close-font",
height: 30
height: 30,
}, {
type: "bi.button",
text: "一般按钮",
block: true,
level: "common",
height: 30
height: 30,
}, {
type: "bi.button",
text: "表示成功状态按钮",
block: true,
level: "success",
height: 30
height: 30,
}, {
type: "bi.button",
text: "表示警告状态的按钮",
block: true,
level: "warning",
height: 30
height: 30,
}, {
type: "bi.button",
text: "表示忽略状态的按钮",
block: true,
level: "ignore",
height: 30
height: 30,
}, {
type: "bi.button",
text: "普通灰化按钮",
block: true,
disabled: true,
level: "success",
height: 30
height: 30,
}, {
type: "bi.button",
text: "忽略状态灰化按钮",
block: true,
disabled: true,
level: "ignore",
height: 30
height: 30,
}, {
type: "bi.button",
text: "带图标的按钮",
block: true,
// level: 'ignore',
iconCls: "close-font",
height: 30
height: 30,
}, {
type: "bi.button",
text: "一般按钮",
clear: true,
level: "common",
height: 30
height: 30,
}, {
type: "bi.button",
text: "表示成功状态按钮",
clear: true,
level: "success",
height: 30
height: 30,
}, {
type: "bi.button",
text: "表示警告状态的按钮",
clear: true,
level: "warning",
height: 30
height: 30,
}, {
type: "bi.button",
text: "表示忽略状态的按钮",
clear: true,
level: "ignore",
height: 30
height: 30,
}, {
type: "bi.button",
text: "普通灰化按钮",
clear: true,
disabled: true,
level: "success",
height: 30
height: 30,
}, {
type: "bi.button",
text: "忽略状态灰化按钮",
clear: true,
disabled: true,
level: "ignore",
height: 30
height: 30,
}, {
type: "bi.button",
text: "带图标的按钮",
clear: true,
// level: 'ignore',
iconCls: "close-font",
height: 30
height: 30,
}, {
type: "bi.text_button",
text: "文字按钮",
height: 30
height: 30,
}, {
type: "bi.button",
text: "幽灵按钮（common）",
ghost: true,
height: 30
height: 30,
}, {
type: "bi.button",
iconCls: "plus-font",
text: "幽灵按钮（common）",
ghost: true,
height: 30
height: 30,
}, {
type: "bi.button",
iconCls: "plus-font",
text: "幽灵按钮（common）",
ghost: true,
level: "warning",
height: 30
height: 30,
}, {
type: "bi.button",
iconCls: "plus-font",
text: "幽灵按钮（common）",
ghost: true,
level: "error",
height: 30
height: 30,
}, {
type: "bi.button",
iconCls: "plus-font",
text: "幽灵按钮（common）",
ghost: true,
level: "success",
height: 30
height: 30,
}, {
type: "bi.button",
text: "幽灵按钮（common）灰化",
disabled: true,
ghost: true,
height: 30
height: 30,
}, {
type: "bi.button",
text: "弹出bubble",
bubble: function () {
return BI.parseInt(Math.random() * 100) % 10 + "提示"
return BI.parseInt(Math.random() * 100) % 10 + "提示";
},
handler: function () {
BI.Msg.toast("1111");
},
height: 30
height: 30,
}, {
type: "bi.button",
text: "自动撑开",
@ -206,76 +229,76 @@ Demo.Button = BI.inherit(BI.Widget, {
iconGap: 64,
vgap: 16,
hgap: 100,
iconPosition: "bottom"
iconPosition: "bottom",
}, {
type: "bi.button",
text: "图标在下面的按钮",
iconCls: "close-font",
iconPosition: "bottom"
iconPosition: "bottom",
}, {
type: "bi.button",
text: "图标在左边的按钮",
iconCls: "close-font",
iconPosition: "left"
iconPosition: "left",
}, {
type: "bi.button",
text: "图标在右边的按钮",
iconCls: "close-font",
iconPosition: "right"
iconPosition: "right",
}, {
type: "bi.button",
text: "浅色的一般按钮",
iconCls: "plus-font",
light: true
light: true,
}, {
type: "bi.button",
text: "浅色的成功按钮",
level: "success",
iconCls: "plus-font",
light: true
light: true,
}, {
type: "bi.button",
text: "浅色的警告按钮",
level: "warning",
iconCls: "plus-font",
light: true
light: true,
}, {
type: "bi.button",
iconCls: "plus-font",
text: "浅色的失败按钮",
level: "error",
cls: "hover-mask",
light: true
light: true,
}, {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
level: "common",
plain: true
plain: true,
}, {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
level: "success",
plain: true
plain: true,
}, {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
level: "error",
plain: true
plain: true,
}, {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
level: "warning",
plain: true
plain: true,
}, {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
level: "ignore",
plain: true
plain: true,
}, {
type: "bi.button",
iconCls: "plus-font",
@ -286,7 +309,7 @@ Demo.Button = BI.inherit(BI.Widget, {
iconCls: "plus-font",
text: "朴素的按钮",
plain: true,
disabled: true
disabled: true,
}, {
type: "bi.button",
iconCls: "plus-font",
@ -299,7 +322,7 @@ Demo.Button = BI.inherit(BI.Widget, {
}
this.setIcon(arr[this.i]);
},
height: 24
height: 24,
}, {
type: "bi.button",
text: "带加载的按钮",
@ -309,7 +332,7 @@ Demo.Button = BI.inherit(BI.Widget, {
setTimeout(() => {
this.loaded();
}, 5 * 1000);
}
},
}, {
type: "bi.button",
text: "带加载的按钮",
@ -320,7 +343,7 @@ Demo.Button = BI.inherit(BI.Widget, {
setTimeout(() => {
this.loaded();
}, 5 * 1000);
}
},
}, {
type: "bi.button",
clear: true,
@ -332,14 +355,27 @@ Demo.Button = BI.inherit(BI.Widget, {
setTimeout(() => {
this.loaded();
}, 5 * 1000);
}
},
}, {
type: "bi.button",
text: "加载中的按钮",
loading: true,
handler() {
console.log("我是无法被触发的!");
}
},
}, {
type: "bi.button",
text: "自定义图标按钮（点我修改）",
icon: {
type: "demo.joker.icon",
},
handler() {
console.log("触发点击事件");
this.loading();
setTimeout(() => {
this.loaded();
}, 5 * 1000);
},
}];
return {
@ -349,10 +385,10 @@ Demo.Button = BI.inherit(BI.Widget, {
hgap: 20,
items: BI.map(items, function (index, value) {
return {
el: value
el: value,
};
})
}),
};
}
},
});
BI.shortcut("demo.button", Demo.Button);

2
package.json
Unescape View File

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

28
src/base/single/button/buttons/button.js
Unescape View File

@ -62,6 +62,7 @@
bgap: 0,
lgap: 0,
rgap: 0,
icon: "",
iconGap: 0,
iconPosition: "left",
});
@ -90,9 +91,12 @@
}
var iconInvisible = !o.loading && !o.iconCls;
if (BI.isPlainObject(o.icon) && !o.loading) {
this.icon = BI.createWidget(o.icon);
} else {
this.icon = BI.createWidget({
type: "bi.icon_label",
cls: o.loading ? loadingCls : o.iconCls,
cls: o.loading ? loadingCls : (o.iconCls || o.icon),
width: this._const.iconWidth,
height: lineHeight,
lineHeight: lineHeight,
@ -101,6 +105,8 @@
iconHeight: o.iconHeight,
invisible: iconInvisible,
});
}
// 用于 whiteSpace
var textWidth = iconInvisible && o.width ? o.width - o.hgap * 2 : null;
if (BI.isNotNull(o.textWidth)) {
@ -125,12 +131,12 @@
tgap: o.iconPosition === "top" ? o.iconGap : 0,
bgap: o.iconPosition === "bottom" ? o.iconGap : 0,
};
var items = [this.icon, BI.extend({ el: this.text }, gapContainer)];
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];
items = [BI.extend({el: this.text}, gapContainer), this.icon];
}
// bi.center_adapt 作用：让 hgap 不影响 iconGap。
BI.createWidget({
@ -155,7 +161,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});
}
},
@ -179,23 +185,31 @@
return this.isLoading();
},
isLoading() {
isLoading: function () {
return this._loading === undefined ? this.options.loading : this._loading;
},
loading: function (loading) {
loading: function () {
this._loading = true;
this.element.addClass("loading");
if (this.icon.loading) {
this.icon.loading();
} else {
// loadingCls 可以覆盖 iconCls 所以不需要移除 iconCls
this.icon.element.addClass(loadingCls);
this.icon.setVisible(true);
}
},
loaded() {
loaded: function () {
this._loading = false;
this.element.removeClass("loading");
if (this.icon.loaded) {
this.icon.loaded();
} else {
this.icon.element.removeClass(loadingCls);
this.icon.setVisible(!!this.options.iconCls);
}
},
setText: function (text) {

Write Preview
Loading…
Cancel
Save