对话框组件 (Dialog)

Element UI 的 Dialog 组件用于在当前页面上弹出一个对话框，在不离开当前页面的情况下与用户进行交互或告知信息。Dialog 组件可以包含标题、内容、以及操作按钮，并支持多种配置选项来实现不同的效果。

提示

Dialog 对话框组件官方文档：https://element.eleme.cn/#/zh-CN/component/dialog (opens new window)

1. 基本用法

基本语法：在 Vue 组件中使用 <el-dialog> 标签创建一个对话框，通过 visible 属性控制对话框的显示与隐藏。

<template>
  <el-button @click="dialogVisible = true">打开对话框</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>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false // 控制对话框的显示与隐藏
    };
  }
};
</script>

• visible 绑定：使用 .sync 修饰符可以实现父组件与子组件之间的同步更新，即可以在子组件内部更新 visible 属性。
• 插槽使用：使用 slot 具名插槽可以自定义对话框内容、标题以及底部操作区。
• 

2. Dialog 属性

参数	说明	类型	可选值	默认值
visible	是否显示 Dialog，支持 .sync 修饰符	boolean	—	false
title	Dialog 的标题，也可通过具名 slot 传入	string	—	—
width	Dialog 的宽度	string	—	50%
fullscreen	是否为全屏 Dialog	boolean	—	false
top	Dialog CSS 中的 margin-top 值	string	—	15vh
modal	是否需要遮罩层	boolean	—	true
modal-append-to-body	遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上	boolean	—	true
append-to-body	Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true	boolean	—	false
lock-scroll	是否在 Dialog 出现时将 body 滚动锁定	boolean	—	true
custom-class	Dialog 的自定义类名	string	—	—
close-on-click-modal	是否可以通过点击 modal 关闭 Dialog	boolean	—	true
close-on-press-escape	是否可以通过按下 ESC 关闭 Dialog	boolean	—	true
show-close	是否显示关闭按钮	boolean	—	true
before-close	关闭前的回调，会暂停 Dialog 的关闭，done 参数用于关闭 Dialog	function(done)	—	—
center	是否对头部和底部采用居中布局	boolean	—	false
destroy-on-close	关闭时销毁 Dialog 中的元素	boolean	—	false

3. Dialog 插槽

名称	说明
—	Dialog 的内容
title	Dialog 标题区的内容
footer	Dialog 按钮操作区的内容

4. Dialog 事件

事件名称	说明	回调参数
open	Dialog 打开的回调	—
opened	Dialog 打开动画结束时的回调	—
close	Dialog 关闭的回调	—
closed	Dialog 关闭动画结束时的回调	—

5. 常用示例

1. 基本对话框

<template>
  <el-button @click="dialogVisible = true">打开对话框</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>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  }
};
</script>

• 基本对话框：通过 visible 控制对话框的显示隐藏，使用 title 指定对话框标题，使用具名插槽 footer 自定义底部按钮操作区。

2. 全屏对话框

<template>
  <el-button @click="dialogVisible = true">打开全屏对话框</el-button>
  <el-dialog :visible.sync="dialogVisible" title="全屏对话框" :fullscreen="true">
    <p>这是一个全屏对话框</p>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  }
};
</script>

• 全屏对话框：通过 fullscreen 属性将对话框设置为全屏模式。

3. 自定义宽度和位置的对话框

<template>
  <el-button @click="dialogVisible = true">自定义宽度和位置</el-button>
  <el-dialog :visible.sync="dialogVisible" title="自定义对话框" width="30%" top="10vh">
    <p>这是一个宽度为 30% 且顶部距离为 10vh 的对话框</p>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  }
};
</script>

• 自定义宽度和位置：通过 width 和 top 属性自定义对话框的宽度和距离顶部的位置。
• 

4. 无遮罩层和锁定滚动的对话框

<template>
  <el-button @click="dialogVisible = true">无遮罩层和锁定滚动</el-button>
  <el-dialog :visible.sync="dialogVisible" title="无遮罩层" :modal="false" :lock-scroll="false">
    <p>这是一个没有遮罩层且不锁定滚动的对话框</p>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  }
};
</script>

• 无遮罩层和锁定滚动：通过 modal 和 lock-scroll 属性控制是否显示遮罩层以及是否锁定页面滚动。
• 

5. 带有关闭前回调的对话框

<template>
  <el-button @click="dialogVisible = true">带有关闭前回调</el-button>
  <el-dialog :visible.sync="dialogVisible" title="回调示例" :before-close="handleBeforeClose">
    <p>点击关闭按钮前会触发回调</p>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    handleBeforeClose(done) {
      this.$confirm('确定要关闭对话框吗？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  }
};
</script>

• 关闭前回调：通过 before-close 属性自定义对话框关闭前的回调逻辑，可用于提示用户确认或执行一些逻辑后再关闭对话框。

6. 嵌套表格的对话框

展示了如何在 Dialog 内部嵌套一个 Element UI 的 Table 组件。通过 gridData 数据源展示了包含日期、姓名和地址的表格。

<template>
  <div>
    <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column property="date" label="日期" width="150"></el-table-column>
        <el-table-column property="name" label="姓名" width="200"></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogTableVisible: false, // 控制 Dialog 显示与隐藏的状态
      gridData: [ // 表格数据源
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ]
    };
  }
};
</script>

设置内容说明：

• gridData：定义了表格的数据源，包含了日期、姓名和地址三列数据。
• el-table 组件：用于在 Dialog 内部展示表格数据，通过 el-table-column 定义表格的列结构。
• dialogTableVisible：用于控制对话框的显示与隐藏状态。

7. 嵌套表单的对话框

说明：展示了如何在 Dialog 内部嵌套一个 Element UI 的 Form 表单组件。表单包含活动名称和活动区域的输入项，并通过 dialogFormVisible 控制对话框的显示与隐藏。

<template>
  <div>
    <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogFormVisible: false, // 控制 Dialog 显示与隐藏的状态
      form: { // 表单数据模型
        name: '',
        region: ''
      },
      formLabelWidth: '120px' // 表单标签的宽度
    };
  }
};
</script>

设置内容说明：

• form：定义了表单的数据模型，包含活动名称 name 和活动区域 region 的输入项。
• formLabelWidth：定义了表单标签的宽度，使表单样式更加整齐。
• el-form 组件：用于在 Dialog 内部创建一个表单，通过 el-form-item 定义表单的各个字段。
• dialogFormVisible：用于控制对话框的显示与隐藏状态。

8. 嵌套 Dialog 的示例

说明：展示了如何在一个 Dialog 内部嵌套另一个 Dialog，通过 append-to-body 属性确保内层 Dialog 正确显示并保持与外层 Dialog 的层级关系。外层 Dialog 控制内层 Dialog 的显示和隐藏。

<template>
  <div>
    <el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button>

    <el-dialog title="外层 Dialog" :visible.sync="outerVisible">
      <el-dialog
        width="30%"
        title="内层 Dialog"
        :visible.sync="innerVisible"
        append-to-body>
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false">取 消</el-button>
        <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      outerVisible: false, // 控制外层 Dialog 显示与隐藏的状态
      innerVisible: false  // 控制内层 Dialog 显示与隐藏的状态
    };
  }
};
</script>

设置内容说明：

• outerVisible：控制外层 Dialog 的显示与隐藏。
• innerVisible：控制内层 Dialog 的显示与隐藏。
• append-to-body 属性：在内层 Dialog 上设置 append-to-body 属性，确保内层 Dialog 插入到 body 元素中，从而正确处理层级关系，避免被外层 Dialog 遮挡。

6. 常见场景与注意事项

• 信息提示与确认：Dialog 组件常用于向用户提示信息，或进行操作确认，例如删除、保存等操作。
• 全屏模式：全屏对话框适合需要覆盖大量内容或需要用户全神贯注的操作场景。
• 自定义内容：Dialog 内容可以是任意的，包括表格、表单等复杂布局，适用于各种复杂场景。
• 嵌套 Dialog：在需要嵌套多个 Dialog 的情况下，使用 append-to-body 属性确保内层 Dialog 的显示效果。

总结

• 灵活的属性配置：通过 visible、width、fullscreen、before-close 等属性灵活控制对话框的行为。
• 丰富的内容支持：支持在对话框中嵌套表格、表单、甚至其他对话框，适应各种复杂的应用场景。
• 层级处理：在嵌套对话框的场景下，通过 append-to-body 属性解决层级问题。