Skip to content

Blazor 自定义弹窗2

Jump to bottom
L edited this page Mar 21, 2024 · 4 revisions

在Blazor中，自定义弹窗通常涉及到创建一个可重用的组件，该组件可以在需要时动态显示和隐藏。下面是一个简单的Blazor自定义弹窗示例。

首先，我们创建一个名为CustomDialog2.razor的组件，该组件将作为我们的自定义弹窗。

@if (ShowDialog)
{
    <div class="custom-dialog-overlay" @onclick="HideDialog">
        <div class="custom-dialog">
            <h3>@DialogTitle</h3>
            <p>@DialogContent</p>
            <button class="btn btn-primary" @onclick="HideDialog">确定</button>
        </div>
    </div>
}

@code {
    [Parameter]
    public bool ShowDialog { get; set; }

    [Parameter]
    public string DialogTitle { get; set; }

    [Parameter]
    public string DialogContent { get; set; }

    private void HideDialog()
    {
        ShowDialog = false;
        // 触发一个事件，通知父组件弹窗已关闭
        // OnDialogClosed?.InvokeAsync(null); // 如果需要的话
    }

    [Parameter]
    public EventCallback OnDialogClosed { get; set; }

    private async Task HideDialogAsync()
    {
        ShowDialog = false;
        await OnDialogClosed.InvokeAsync(null); // 触发事件回调
    }
}

接下来，我们需要为弹窗添加一些样式。在wwwroot/css目录下创建一个名为CustomDialog2.css的文件，并添加以下样式：

/* CustomDialog.css */  
.custom-dialog-overlay {  
    position: fixed;  
    top: 0;  
    left: 0;  
    right: 0;  
    bottom: 0;  
    background-color: rgba(0, 0, 0, 0.5);  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    z-index: 1000; /* 确保弹窗在最顶层 */  
}  
  
.custom-dialog {  
    background-color: #fff;  
    padding: 20px;  
    border-radius: 5px;  
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);  
}

现在，我们创建一个名为ShowCustomDialog2.razor的组件：

<h1>Blazor 自定义弹窗示例</h1>

<button class="btn btn-primary" @onclick="ShowDialog">显示弹窗</button>

<CustomDialog2 @ref="customDialogRef" ShowDialog="@showDialog" DialogTitle="标题" DialogContent="这是弹窗的内容" OnDialogClosed="HandleDialogClosed" />

@code {
    private bool showDialog = false;
    private CustomDialog2 customDialogRef;

    private void ShowDialog()
    {
        showDialog = true;
    }

    private async Task HandleDialogClosed()
    {
        // 在这里处理弹窗关闭后的逻辑，比如重新显示弹窗或执行其他操作
        // 如果需要再次显示弹窗，可以调用 ShowDialog 方法
        // showDialog = true; // 如果需要的话，取消注释这一行来重新显示弹窗
    }
}

在ShowCustomDialog2.razor中引入CustomDialog2.css文件：

<!-- wwwroot/index.html -->  
<head>  
    <!-- 其他 head 内容 -->  
    <link href="css/CustomDialog2.css" rel="stylesheet" />  
</head>

在这个例子中，当弹窗关闭时，HandleDialogClosed方法会被调用。你可以在这个方法中添加逻辑来决定是否需要重新显示弹窗。如果需要的话，你可以取消注释showDialog = true;这一行来重新显示弹窗。

请注意，使用事件回调的方法更加灵活，因为它允许你在弹窗关闭时执行更复杂的逻辑，而不仅仅是简单地切换弹窗的显示状态。你可以根据具体需求选择适合的方法。

示例代码

ShowCustomDialog2.razor
CustomDialog2.razor

Clone this wiki locally