css - 各个数字之间用下划线和下划线

因此，我有一个数字，可以说19356，我希望它看起来像1 | 9 | 3 | 5 | 6，并且都带有下划线。在不破坏数字并添加管道和下划线的情况下是否可行？同样，它也不必是管道，而只是数字之间的一条线。

最佳答案

我有一个解决您的问题的方法。您可以通过扩展sap.m.FormattedText并按如下方式处理功能来实现此目的。

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

这是扩展FormattedText并具有一个int类型的属性编号的第一类，因为您想使用数字，因此我选择了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，并保持数字的原始值。然后，可以使用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);