elementui中 el-dialog使用

Element UI是一套基于Vue.js的组件库，其中el-dialog是其中的一个组件，用于实现弹窗对话框的功能。下面是关于el-dialog的使用介绍：

1. 引入Element UI库：在Vue项目中，首先需要引入Element UI库。可以通过npm安装，然后在项目的入口文件中引入Element UI的样式和组件。

2. 使用el-dialog组件：在需要使用弹窗对话框的地方，可以使用el-dialog组件进行布局和交互。以下是el-dialog的基本用法：

   <template>
     <div>
       <el-button @click="showDialog">打开对话框</el-button>
       <el-dialog :visible.sync="dialogVisible" title="对话框标题">
         <p>对话框内容</p>
         <span slot="footer" class="dialog-footer">
           <el-button @click="dialogVisible = false">取 消</el-button>
           <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
         </span>
       </el-dialog>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         dialogVisible: false
       };
     },
     methods: {
       showDialog() {
         this.dialogVisible = true;
       }
     }
   };
   </script>

在上述代码中，通过点击按钮打开对话框，使用`:visible.sync`绑定`dialogVisible`变量控制对话框的显示与隐藏。`title`属性设置对话框的标题，`slot="footer"`用于自定义对话框的底部按钮。

3. 自定义对话框内容：可以在el-dialog组件内部编写自定义的对话框内容，可以是文本、表单、图片等任意HTML元素。

4. 更多配置选项：el-dialog还提供了一些其他的配置选项，如`width`设置对话框的宽度，`modal`设置是否显示遮罩层等。可以根据实际需求进行配置。