Sapui5 如何设置sap.m.MessagePopover的宽度?

Sapui5 如何设置sap.m.MessagePopover的宽度?,sapui5,sap-fiori,Sapui5,Sap Fiori,该控件有一个属性\u oPopover(内部包含sap.m.Popover)。 使用此属性,我可以设置popover宽度: messagePopover._oPopover.setContentWidth("450px"); 但是,由于不应该使用从开始的SAP属性,有人知道更干净的方法吗?另一个解决方案是使用CSS类。然而,有一个陷阱。正如您可以从下面看到的消息popover生成的DOM,使用了内联样式:(。 重写内联样式的唯一方法是在CSS中使用!important,这也是不推荐的方法。但

该控件有一个属性
\u oPopover
(内部包含sap.m.Popover)。 使用此属性,我可以设置popover宽度:

messagePopover._oPopover.setContentWidth("450px");

但是,由于不应该使用从
开始的SAP属性,有人知道更干净的方法吗?

另一个解决方案是使用CSS类。然而,有一个陷阱。正如您可以从下面看到的消息popover生成的DOM,使用了内联样式:(。

重写内联样式的唯一方法是在CSS中使用!important,这也是不推荐的方法。但是,考虑到使用了内联CSS,我会使用!important关键字。下面是工作代码:

XML代码(用于添加类):

你可以玩你需要多少宽度的消息弹出框

编辑:这来自源代码:

MessagePopover.prototype.init = function () {
            var that = this;
            var oPopupControl;

            this._oResourceBundle = sap.ui.getCore().getLibraryResourceBundle("sap.m");

            this._oPopover = new ResponsivePopover(this.getId() + "-messagePopover", {
                showHeader: false,
                contentWidth: "440px",
                placement: this.getPlacement(),
                showCloseButton: false,
                modal: false,
                afterOpen: function (oEvent) {
                    that.fireAfterOpen({openBy: oEvent.getParameter("openBy")});
                },
                afterClose: function (oEvent) {
                    that._navContainer.backToTop();
                    that.fireAfterClose({openBy: oEvent.getParameter("openBy")});
                },
                beforeOpen: function (oEvent) {
                    that.fireBeforeOpen({openBy: oEvent.getParameter("openBy")});
                },
                beforeClose: function (oEvent) {
                    that.fireBeforeClose({openBy: oEvent.getParameter("openBy")});
                }
            }).addStyleClass(CSS_CLASS);

从UI5 1.46版开始,可以使用更灵活的控件来代替旧的
sap.m.MessagePopover

  • 无需访问内部属性或应用自定义CSS样式类来操作宽度(尽管如此,Fiori指南仅使用它或对话框)

    const popover=新响应popover({
    contentWidth:“450px”,
    内容高度:“450px”,
    内容:[
    /*myMessageView*/
    ],
    });
    // ...
    popover.openBy(…);
    
  • 与MessagePopover相比,MessageView可以对项目进行分组等等

  • 内部也是如此

您是否尝试过使用下面建议的
sap.m.MessageView
        .myPopoverClass {
            width:100rem;
        }
        .myPopoverClass .sapMPopoverCont {
            width:100% !important;
        }
MessagePopover.prototype.init = function () {
            var that = this;
            var oPopupControl;

            this._oResourceBundle = sap.ui.getCore().getLibraryResourceBundle("sap.m");

            this._oPopover = new ResponsivePopover(this.getId() + "-messagePopover", {
                showHeader: false,
                contentWidth: "440px",
                placement: this.getPlacement(),
                showCloseButton: false,
                modal: false,
                afterOpen: function (oEvent) {
                    that.fireAfterOpen({openBy: oEvent.getParameter("openBy")});
                },
                afterClose: function (oEvent) {
                    that._navContainer.backToTop();
                    that.fireAfterClose({openBy: oEvent.getParameter("openBy")});
                },
                beforeOpen: function (oEvent) {
                    that.fireBeforeOpen({openBy: oEvent.getParameter("openBy")});
                },
                beforeClose: function (oEvent) {
                    that.fireBeforeClose({openBy: oEvent.getParameter("openBy")});
                }
            }).addStyleClass(CSS_CLASS);