Browse Source

DESIGN-3951 feat: fineUI的tooltip组件优化

es6
zsmj 2 years ago
parent
commit
c637343ad4
  1. 20
      demo/js/base/tip/demo.title.js
  2. 16
      src/base/single/0.single.js
  3. 7
      src/base/single/tip/tip.tooltip.js
  4. 23
      src/core/controller/controller.tooltips.js

20
demo/js/base/tip/demo.title.js

@ -30,6 +30,26 @@ Demo.Title = BI.inherit(BI.Widget, {
warningTitle: "自定义title提示效果",
text: "自定义title提示效果",
textAlign: "center"
}, {
type: "bi.label",
cls: "layout-bg3",
height: 50,
title: () => "函数返回值作为title提示",
text: "title提示支持函数",
textAlign: "center"
}, {
type: "bi.label",
cls: "layout-bg4",
height: 50,
title: function () {
return {
level: "success",
text: "自定义title\n提示效果",
textAlign: "center"
};
},
text: "title提示支持对象,作为bi.tooltip的props",
textAlign: "center"
}],
hgap: 300,
vgap: 20

16
src/base/single/0.single.js

@ -23,11 +23,17 @@ BI.Single = BI.inherit(BI.Widget, {
_showToolTip: function (e, opt) {
opt || (opt = {});
var self = this, o = this.options;
var type = this.getTipType() || (this.isEnabled() ? "success" : "warning");
var title = type === "success" ? this.getTitle() : (this.getWarningTitle() || this.getTitle());
if (BI.isKey(title)) {
BI.Tooltips.show(e, this.getName(), title, type, this, opt);
var o = this.options;
var tooltipOpt = {};
var title = this.getTitle();
if (BI.isPlainObject(title)) {
tooltipOpt = title;
} else {
tooltipOpt.level = this.getTipType() || (this.isEnabled() ? "success" : "warning");
tooltipOpt.text = tooltipOpt.level === "success" ? title : (this.getWarningTitle() || title);
}
if (BI.isKey(tooltipOpt.text)) {
BI.Tooltips.show(e, this.getName(), tooltipOpt, this, opt);
if (o.action) {
BI.Actions.runAction(o.action, "hover", o, this);
}

7
src/base/single/tip/tip.tooltip.js

@ -17,7 +17,8 @@ BI.Tooltip = BI.inherit(BI.Tip, {
text: "",
level: "success", // success或warning
stopEvent: false,
stopPropagation: false
stopPropagation: false,
textAlign: "left",
});
},
@ -47,7 +48,7 @@ BI.Tooltip = BI.inherit(BI.Tip, {
items: BI.map(texts, function (i, text) {
return {
type: "bi.label",
textAlign: "left",
textAlign: o.textAlign,
whiteSpace: "normal",
text: text,
textHeight: 18
@ -58,7 +59,7 @@ BI.Tooltip = BI.inherit(BI.Tip, {
this.text = BI.createWidget({
type: "bi.label",
element: this,
textAlign: "left",
textAlign: o.textAlign,
whiteSpace: "normal",
text: o.text,
textHeight: 18,

23
src/core/controller/controller.tooltips.js

@ -12,17 +12,25 @@ BI.TooltipsController = BI.inherit(BI.Controller, {
this.showingTips = {};// 存储正在显示的tooltip
},
_createTooltip: function (text, level) {
/**
*
* @param opt
* @param opt.text {String} 文本
* @param opt.level {String} 级别, success或warning
* @param opt.textAlign {String} 文本对齐方式, left, center, right
* @returns {*}
* @private
*/
_createTooltip: function (opt) {
return BI.createWidget({
type: "bi.tooltip",
text: text,
level: level,
...opt,
stopEvent: true
});
},
// opt: {container: '', belowMouse: false}
show: function (e, name, text, level, context, opt) {
show: function (e, name, tooltipOpt, context, opt) {
opt || (opt = {});
var self = this;
BI.each(this.showingTips, function (i, tip) {
@ -30,7 +38,7 @@ BI.TooltipsController = BI.inherit(BI.Controller, {
});
this.showingTips = {};
if (!this.has(name)) {
this.create(name, text, level, opt.container || "body");
this.create(name, tooltipOpt, opt.container || "body");
}
if (!opt.belowMouse) {
var offset = context.element.offset();
@ -41,7 +49,6 @@ BI.TooltipsController = BI.inherit(BI.Controller, {
var top = offset.top + bounds.height + 5;
}
var tooltip = this.get(name);
tooltip.setText(text);
tooltip.element.css({
left: "0px",
top: "0px"
@ -84,9 +91,9 @@ BI.TooltipsController = BI.inherit(BI.Controller, {
return this;
},
create: function (name, text, level, context) {
create: function (name, tooltipOpt, context) {
if (!this.has(name)) {
var tooltip = this._createTooltip(text, level);
var tooltip = this._createTooltip(tooltipOpt);
this.add(name, tooltip);
BI.createWidget({
type: "bi.absolute",

Loading…
Cancel
Save