如何使用Aurelia-Dialog插件的“位置”配置设置

Question

问题：

我一直在尝试弄清楚如何在基于 Aurelia 的网站上使用 Aurelia-Dialog 插件的“位置”配置设置，但我无法弄清楚，无法在所有物联网上找到单个示例.

可以在这里找到一些非常模糊的文档： http://aurelia.io/hub.html#/doc/article/aurelia/dialog/latest/dialog-basics/5

对于那些不想访问该链接的人，对于“位置”，它说：

Position - 在显示带有签名的模态之前调用的回调：(modalContainer: Element, modalOverlay: Element) => void。这允许您设置特殊类、调整位置等...如果指定，则忽略 centerHorizontalOnly。 （可选）

我已经尝试了一切，从尝试将代码直接添加到

main.js

中的插件配置：

plugin('aurelia-dialog', config => {}
    .plugin('aurelia-dialog', config => {
      config.useDefaults();
      //config.settings.position = ;
    })

尝试将其用作我的

dialogService.open

函数的参数：

showMessage(message, title = 'Message', options = ['Ok'], dismissable = false) {
    return this.dialogService.open({ viewModel: TestModal, 
    model: { message, title, options }, 
    overlayDismiss: 
    dismissable, 
    position: function(stuff){ modal, modalOverlay} });

我的问题：

我如何实际使用

position

设置，如果我的

function(stuff){modal, overlay}

格式正确，我如何实际将模态和叠加层传递给此函数？

我在这方面几乎陷入了困境，所以任何帮助都会很有用。

提前致谢。

Answer 1

在对话框类的构造函数中，您需要注入DialogController，然后定义回调函数。

import { DialogController } from "aurelia-dialog";
@inject(DialogController)
export class YourDialog {
    constructor(private controller: DialogController) {
        this.controller.settings.position = (modalContainer: Element,   modalOverlay: Element) => {
        let container = modalContainer;
        let overlay = modalOverLay;
    };
   }
}

Answer 2

您需要使用位置回调函数，您可以访问模态的

dialogContainer

和

dialogOverlay

容器，在那里您将能够更新它们的任何属性：

showMessage(message, title = 'Message', options = ['Ok'], dismissable = false) {
    return this.dialogService.open({ 
        viewModel: TestModal, 
        model: { message, title, options }, 
        overlayDismiss: dismissable, 
        position:(dialogContainer, dialogOverlay) => {

             const div = dialogContainer.firstElementChild;
    
             div.classList.add('your-css-class');

        }
}

例如，我在这里对模态中的

div

进行更新，应用

.your-css-class

类中设置的一些样式。