Blazor 自定义可重用基础组件之 Dialog (Bootstrap Modal)

对话框是常用的组件之一，可以提供信息提示，也可以设置表单录入数据等。但是，Bootstrap Modal需要JS互操作，这个不太懂，只能绕过。这里没有一句JS代码，非常好用。

以下是具体代码：

@if (showDialog)
{
    

        

            

                

                    
@Title
                    @if (CloseButton)
                    {
                        
                            ×
                        
                    }
                
                

                    @BodyContent
                
                

                    @FootContent
                
            
        
    
}
@code
{
    public bool showDialog { get; set; }
    public enum Size { Normal, Large, FitScreen }
    [Parameter]
    public string Title { get; set; } = "信息";
    [Parameter]
    public Size DialogSize { get; set; } = Size.Normal;
    [Parameter]
    public RenderFragment? BodyContent { get; set; }
    [Parameter]
    public RenderFragment? FootContent { get; set; }
    [Parameter] public bool CloseButton { get; set; } = true;

    public void Show() => showDialog = true;

    public void Hide() => showDialog = false;
}

Dialog.razor.css：

.modal-window {
    background-color: rgba(240, 240, 240, 0.75);
    display: block !important;
}

.fit-screen .modal-dialog {
    width: 99% !important;
    height: 99% !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 99% !important;
}

.fit-screen .modal-content {
    height: auto !important;
    min-height: 99% !important;
    border-radius: 0 !important;
}

使用：

    
        欢迎使用Bootstrap Modal的对话框！
    
    
        保存
        关闭
    

打开对话框
@code {

    Dialog? dialog;
    void openDialog()
    {
        if (dialog != null)
        {
            dialog.Show();
        }
    }
    void closeDialog()
    {
        if (dialog != null)
        {
            dialog.Hide();
        }
    }

效果：