Browse Source

无JIRA任务 label提供多行文本溢出显示...(仅webkit)

es6
windy 4 years ago
parent
commit
d1a3b2418e
  1. 3
      changelog.md
  2. 8
      demo/js/base/demo.label.js
  3. 1
      src/base/single/label/label.js
  4. 15
      src/base/single/text.js

3
changelog.md

@ -1,4 +1,7 @@
# 更新日志
2.0(2020-09)
- bi.label支持多行文本溢出显示...(仅支持webkit内核)
2.0(2020-08)
- bi.sign_editor支持显示值居左/居中/居右显示
- bi.iframe新增EVENT_LOADED事件

8
demo/js/base/demo.label.js

@ -104,6 +104,14 @@ Demo.Label = BI.inherit(BI.Widget, {
textWidth: 200,
textHeight: 30,
height: 60
}, {
type: "bi.label",
cls: "layout-bg1",
text: "label设置了宽度, 并且设置了显示行数是2行, 无论输入多少文本,在允许换行的情况下只会显示2行,并在第二行结尾出现...",
textAlign: "left",
width: 300,
lineNumber: 2,
whiteSpace: "normal"
}, {
type: "bi.left",
items: [{

1
src/base/single/label/label.js

@ -17,6 +17,7 @@ BI.Label = BI.inherit(BI.AbstractLabel, {
textAlign: o.textAlign,
whiteSpace: o.whiteSpace,
lineHeight: o.textHeight,
lineNumber: o.lineNumber,
text: o.text,
value: o.value,
py: o.py,

15
src/base/single/text.js

@ -20,7 +20,8 @@
bgap: 0,
text: "",
py: "",
highLight: false
highLight: false,
lineNumber: null,
},
render: function () {
@ -54,12 +55,20 @@
if (BI.isWidthOrHeight(o.maxWidth)) {
this.element.css({maxWidth: o.maxWidth});
}
this.element.css({
var cssObj = {
textAlign: o.textAlign,
whiteSpace: this._getTextWrap(),
textOverflow: o.whiteSpace === "nowrap" ? "ellipsis" : "",
overflow: o.whiteSpace === "nowrap" ? "" : (BI.isWidthOrHeight(o.height) ? "auto" : "")
overflow: o.whiteSpace === "nowrap" ? "" : (BI.isWidthOrHeight(o.height) ? "auto" : ""),
};
if (BI.isNumber(o.lineNumber)) {
BI.extend(cssObj, {
display: "-webkit-box",
"-webkit-line-clamp": o.lineNumber + "",
"-webkit-box-orient": "vertical",
});
}
this.element.css(cssObj);
if (o.handler && o.handler !== BI.emptyFn) {
this.text = BI.createWidget({
type: "bi.layout",

Loading…
Cancel
Save