引入 Dialog 组件
在使用 Element-React 的对话框组件之前，需要先确保已正确引入该组件。可以通过以下方式引入：
import { ElDialog } from 'element-react';或者如果你希望一次性导入所有组件，可以这样操作：
import * as ElementReact from 'element-react';
然后在你的 React 组件中使用 ElDialog 组件。
基本用法
最简单的对话框
最基本的对话框只需要一个标题和一些内容。下面是一个简单的例子：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - --------- -------- - ---- ----------------
----- --- - -- -- -
----- --------- ----------- - ----------------
------ -
-----
--------- -------------- ----------- -- ----------------------------------
--------- ---------- ----------------- ----------- -- -------------------
-------------
-----------
------
--
--
------ ------- ----可关闭的对话框
默认情况下，对话框是可以被用户关闭的。如果需要自定义关闭行为，可以通过监听事件来实现：
<ElDialog title="提示" visible={visible} onClosed={() => console.log('对话框已关闭')}>
<p>这是一段信息</p>
</ElDialog>确认按钮
对话框通常会有一个确认按钮，用于执行某些操作。这可以通过设置 showCancelButton 和 showConfirmButton 属性来实现：
-- -------------------- ---- ------- --------- ---------- ----------------- ---------------- ----------------- ---------------------- --------------------- ------------- -- ------------------ ------------ -- ------------------ - ------------- -----------
自定义按钮
除了默认的确认和取消按钮外，还可以添加自定义按钮。这需要通过 buttons 属性来实现，并且每个按钮都需要指定 text、type 和 onClick 属性：
-- -------------------- ---- -------
---------
----------
-----------------
----------
-
----- ------
----- ----------
-------- -- -- ------------------
--
-
----- ------
----- ---------
-------- -- -- ------------------
-
--
-
-------------
-----------高级用法
自定义头部和底部
有时需要自定义对话框的头部和底部内容。这可以通过设置 header 和 footer 属性来实现：
<ElDialog
title="提示"
visible={visible}
header={<div>这里是头部</div>}
footer={<div>这里是底部</div>}
>
<p>这是一段信息</p>
</ElDialog>模态对话框
模态对话框会覆盖页面上的其他元素，直到用户关闭对话框为止。可以通过设置 modal 属性为 true 来启用此功能：
<ElDialog
title="提示"
visible={visible}
modal
>
<p>这是一段信息</p>
</ElDialog>顶部对齐的对话框
默认情况下，对话框的内容区域是居中的。如果需要将其设置为顶部对齐，可以通过 top 属性来调整：
<ElDialog
title="提示"
visible={visible}
top="10vh"
>
<p>这是一段信息</p>
</ElDialog>自定义宽度
默认情况下，对话框的宽度是固定的。如果需要调整其宽度，可以通过 width 属性来实现：
<ElDialog
title="提示"
visible={visible}
width="60%"
>
<p>这是一段信息</p>
</ElDialog>动画效果
对话框还支持动画效果，可以通过 customClass 属性来自定义 CSS 类，从而实现不同的动画效果：
-- -------------------- ---- -------
---------
----------
-----------------
---------------------------
-
-------------
-----------
-------
-------------- -
---------- ---------- -----
-
---------- ---------- -
---- -
-------- --
---------- ------------------
-
-- -
-------- --
---------- --------------
-
-
--------结语
以上就是关于 Element-React 中 Dialog 对话框的详细介绍。通过这些示例和配置选项，你可以根据实际需求灵活地使用对话框组件。希望这篇教程对你有所帮助！