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

**Blazor 自定义可重用基础组件之 Dialog (Bootstrap Modal)**在 Blazor 应用中，Dialog（Bootstrap Modal）是非常常用的 UI 组件之一。它可以用于弹出窗口、提示信息、确认操作等场景。在传统的 Web 开发中，我们通常会使用 Bootstrap 或其他 UI 库来实现 Dialog 的功能。但是在 Blazor 中，由于其强大的可重用性和组件化特点，我们可以轻松地创建一个自定义的 Dialog 组件。

**为什么需要自定义 Dialog 组件？**

虽然我们可以直接使用 Bootstrap 或其他 UI 库中的 Dialog 组件，但有几个原因使得我们需要自定义一个 Dialog 组件：

1. **可重用性**: 我们希望能够在整个应用中轻松地使用这个组件，而不必每次都复制粘贴相同的代码。
2. **定制化**: 每个应用可能会有不同的需求和风格，我们需要能够根据具体场景来调整 Dialog 的样式和行为。
3. **维护性**: 如果我们直接使用第三方库中的组件，随着时间的推移，我们可能会发现这些组件已经过时或不再支持。

**创建自定义 Dialog 组件**

下面是我们如何创建一个基本的自定义 Dialog 组件：

csharp// Dialog.razor@using Microsoft.AspNetCore.Components<div @onmouseover="OnMouseOver" @onmouseout="OnMouseOut">
 <button @onclick="ShowDialog">显示对话框</button>
 <div class="modal fade" id="dialogModal" tabindex="-1" role="dialog" aria-labelledby="dialogModalLabel" aria-hidden="true">
 <div class="modal-dialog" role="document">
 <div class="modal-content">
 <div class="modal-header">
 <h5 class="modal-title" id="dialogModalLabel">对话框标题</h5>
 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 <span aria-hidden="true">&times;</span>
 </button>
 </div>
 <div class="modal-body">
 <p>这是一个示例对话框内容</p>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
 <button type="button" class="btn btn-primary">确认</button>
 </div>
 </div>
 </div>
 </div>

@code {
 private bool _isDialogOpen = false;

 public void ShowDialog()
 {
 _isDialogOpen = true;
 StateHasChanged();
 }

 public void OnMouseOver()
 {
 Console.WriteLine("鼠标悬浮");
 }

 public void OnMouseOut()
 {
 Console.WriteLine("鼠标移出");
 }
}

csharp// Index.razor@page<div>
 <Dialog />
</div>

@code {
 private void ShowDialog()
 {
 Console.WriteLine("显示对话框");
 }
}