css - ea 数字之间的竖线和下划线

Question

所以我有一个数字让我们说 19356 我希望它看起来像 1|9|3|5​​|6 并且它也都带有下划线。这可能不破坏数字并添加管道和下划线吗？它也不一定是管道，只是数字之间的一条线。

Answer 1

我有办法解决你的问题。您可以通过扩展 sap.m.FormattedText 并处理我们需要的功能来实现它，如下所示。

我将创建两个名为 SpecialFormattedText 和 SpecialFormattedTextRenderer 的文件，如下所示。

这是扩展 FormattedText 的第一个类，它有一个类型为 int 的属性 number，因为您想使用数字，所以我选择了 int 数据类型。

sap.ui.define(["sap/m/FormattedText"], function (FormattedText) {
    "use strict";
    return FormattedText.extend("SpecialFormattedText", {
        metadata : {
            properties : {
                 number : {
                     type : "int", defaultValue : null
                 }
            }
        },
        setNumber : function(iMumber) {
            this.setProperty("number", iMumber, true);
            this.setProperty("htmlText", this._getUpdatedNumber(iMumber), true);
        },
        _getUpdatedNumber : function(iMumber) {
            return "<U>"+iMumber.toString().match(/.{1}/g).join('|')+"</U>";
        }
    });
});

这里我将根据需要转换输入并设置为FormattedText的htmlText，并在number中保持原始值。您可以使用 SpecialFormattedText 类对象提供的 getNumber 方法获取原始值。

下一件重要的事情是我们在另一个名为 SpecialFormattedTextRenderer 的类中编写渲染器。在这个类中，我们将调用 sap.m.FormattedTextRenderer 类渲染器方法，如下所示。

sap.ui.define(["sap/m/FormattedTextRenderer"], function (FormattedTextRenderer) {
    "use strict";
    var SpecialFormattedTextRenderer = {};
    SpecialFormattedTextRenderer.render = function (oRM, oControl) {
        oRM.write("<div");
        FormattedTextRenderer.render(oRM, oControl);
        oRM.write("</div>");
    };
    return SpecialFormattedTextRenderer;
},true);