Element UI 对话框组件 Dialog 使用详解-优快云博客

Element UI 对话框组件 Dialog 使用详解

【免费下载链接】element A Vue.js 2.0 UI Toolkit for Web 项目地址: https://gitcode.com/gh_mirrors/eleme/element

什么是 Dialog 组件

Dialog 对话框组件是 Element UI 提供的一个模态窗口组件，用于在保留当前页面状态的情况下向用户展示重要信息或收集用户输入。它广泛应用于各种需要用户确认或交互的场景，如提示信息、表单提交、内容展示等。

基本用法

Dialog 组件的基本使用非常简单，通过控制 visible 属性来显示或隐藏对话框。

<el-button type="text" @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>

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

关键点说明

visible.sync：双向绑定对话框的显示状态
title：设置对话框标题
width：控制对话框宽度
before-close：关闭前的回调函数，可用于添加确认关闭逻辑
footer 插槽：用于放置底部按钮区域

自定义内容

Dialog 的内容区域可以放置任何内容，包括表格、表单等组件。

表格示例

<el-button type="text" @click="dialogTableVisible = true">打开包含表格的对话框</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>

表单示例

<el-button type="text" @click="dialogFormVisible = true">打开包含表单的对话框</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>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">确定</el-button>
  </span>
</el-dialog>

嵌套对话框

虽然不推荐，但在某些特殊情况下可能需要使用嵌套对话框。此时必须为内层对话框设置 append-to-body 属性。

<el-button type="text" @click="outerVisible = true">打开外层对话框</el-button>

<el-dialog title="外层对话框" :visible.sync="outerVisible">
  <el-dialog
      width="30%"
      title="内层对话框"
      :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">打开内层对话框</el-button>
  </div>
</el-dialog>

内容居中显示

通过设置 center 属性可以让对话框的标题和底部按钮居中显示。

<el-button type="text" @click="centerDialogVisible = true">点击打开居中对话框</el-button>

<el-dialog
  title="警告"
  :visible.sync="centerDialogVisible"
  width="30%"
  center>
  <span>需要注意的是内容默认不会居中显示</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">确定</el-button>
  </span>
</el-dialog>

重要特性说明

延迟渲染：Dialog 内容默认是懒渲染的，只有首次打开时才会渲染到 DOM 中。如果需要操作 DOM 或通过 ref 访问组件，请在 open 事件回调中进行。
Vuex 集成：如果 visible 属性绑定到 Vuex store 中的变量，.sync 修饰符将无法正常工作。此时应移除 .sync，改为监听 Dialog 的 open 和 close 事件，在事件处理函数中提交 Vuex mutation 来更新状态。

完整 API 参考

属性

属性名	说明	类型	可选值	默认值
visible	是否显示对话框，支持 .sync 修饰符	boolean	—	false
title	对话框标题，也可通过具名 slot 传入	string	—	—
width	对话框宽度	string	—	50%
fullscreen	是否全屏显示	boolean	—	false
top	对话框 CSS 中的 margin-top 值	string	—	15vh
modal	是否显示遮罩层	boolean	—	true
modal-append-to-body	遮罩层是否插入至 body 元素上	boolean	—	true
append-to-body	对话框自身是否插入至 body 元素上	boolean	—	false
lock-scroll	对话框显示时是否禁用 body 滚动	boolean	—	true
custom-class	自定义类名	string	—	—
close-on-click-modal	是否可以通过点击遮罩层关闭对话框	boolean	—	true
close-on-press-escape	是否可以通过按下 ESC 键关闭对话框	boolean	—	true
show-close	是否显示关闭按钮	boolean	—	true
before-close	关闭前的回调函数	function(done)	—	—
center	是否居中显示标题和底部内容	boolean	—	false
destroy-on-close	关闭时销毁对话框中的元素	boolean	—	false

插槽

名称	说明
—	对话框内容
title	对话框标题内容
footer	对话框底部内容

事件

事件名	说明	参数
open	对话框打开时触发	—
opened	对话框打开动画结束时触发	—
close	对话框关闭时触发	—
closed	对话框关闭动画结束时触发	—

最佳实践建议

避免过度使用：对话框会中断用户当前操作，应谨慎使用，只在必要时才显示对话框。
保持简洁：对话框内容应简洁明了，避免放置过多内容或复杂操作。
明确操作：底部按钮应明确表示操作意图，如"确定"、"取消"等。
响应式设计：考虑在不同屏幕尺寸下的显示效果，适当调整 width 和 fullscreen 属性。
无障碍访问：确保对话框可以通过键盘操作，并正确管理焦点。

通过合理使用 Element UI 的 Dialog 组件，可以大大提升用户界面的交互体验和功能性。

【免费下载链接】element A Vue.js 2.0 UI Toolkit for Web 项目地址: https://gitcode.com/gh_mirrors/eleme/element

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考