el-dialog详解

el-dialog 是 Element Plus 框架中的一个对话框组件，用于显示模态对话框。它可以包含任意内容，适用于多种提示和操作场景。

一。 el-dialog 属性详解

1. visible:

   • 类型: Boolean
   • 用途: 控制对话框的显示状态。
   • 默认值: false

2. title:

   • 类型: String
   • 用途: 对话框的标题。

3. width:

   • 类型: String
   • 用途: 对话框的宽度。
   • 默认值: 50%

4. top:

   • 类型: String
   • 用途: 对话框距离窗口顶部的距离。
   • 默认值: 15vh

5. modal:

   • 类型: Boolean
   • 用途: 是否需要遮罩层。
   • 默认值: true

6. append-to-body:

   • 类型: Boolean
   • 用途: 是否将对话框插入至 body 元素。
   • 默认值: false

7. lock-scroll:

   • 类型: Boolean
   • 用途: 是否在打开对话框后禁止页面滚动。
   • 默认值: true

8. close-on-click-modal:

   • 类型: Boolean
   • 用途: 是否可以通过点击遮罩层关闭对话框。
   • 默认值: true

9. close-on-press-escape:

   • 类型: Boolean
   • 用途: 是否可以通过按下 ESC 关闭对话框。
   • 默认值: true

10. show-close:

    • 类型: Boolean
    • 用途: 是否显示关闭按钮。
    • 默认值: true

11. before-close:

    • 类型: Function
    • 用途: 关闭前的回调函数。

12. modal-append-to-body:

    • 类型: Boolean
    • 用途: 是否将遮罩层插入至 body 元素。
    • 默认值: true

13. destroy-on-close:

    • 类型: Boolean
    • 用途: 是否在关闭对话框后销毁 DOM。
    • 默认值: false

14. center:

    • 类型: Boolean
    • 用途: 是否将对话框的标题居中。
    • 默认值: false

二。 el-dialog 事件详解

1. open:

   • 类型: Function
   • 用途: 对话框打开时触发的回调函数。

2. opened:

   • 类型: Function
   • 用途: 对话框完全打开时触发的回调函数。

3. close:

   • 类型: Function
   • 用途: 对话框关闭时触发的回调函数。

4. closed:

   • 类型: Function
   • 用途: 对话框完全关闭时触发的回调函数。

三。 el-dialog 插槽详解

1. default:

   • 插槽名称: default
   • 用途: 对话框的内容。

2. title:

   • 插槽名称: title
   • 用途: 自定义对话框的标题。

3. footer:

   • 插槽名称: footer
   • 用途: 自定义对话框的底部内容。

四。示例代码

<template>
  <div>
    <h2>Dialog 示例</h2>

    <!-- 基本用法 -->
    <el-button type="primary" @click="dialogVisible = true">打开对话框</el-button>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>这是一段信息</span>
      <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>

    <!-- 自定义标题 -->
    <el-button type="primary" @click="customTitleDialogVisible = true">自定义标题对话框</el-button>
    <el-dialog
      :visible.sync="customTitleDialogVisible"
      width="30%"
      :before-close="handleClose">
      <template #title>
        <span style="color: red;">自定义标题</span>
      </template>
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="customTitleDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="customTitleDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 居中对齐 -->
    <el-button type="primary" @click="centeredDialogVisible = true">居中对齐对话框</el-button>
    <el-dialog
      title="提示"
      :visible.sync="centeredDialogVisible"
      width="30%"
      center
      :before-close="handleClose">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centeredDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centeredDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const dialogVisible = ref(false)
const customTitleDialogVisible = ref(false)
const centeredDialogVisible = ref(false)

const handleClose = (done) => {
  this.$confirm('确认关闭？')
    .then(_ => {
      done()
    })
    .catch(_ => {})
}
</script>