039_Dialog对话框

最新推荐文章于 2025-09-11 04:14:22 发布

原创最新推荐文章于 2025-09-11 04:14:22 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #jquery

element-ui 专栏收录该内容

57 篇文章

订阅专栏

本文详细介绍了Element UI的Dialog对话框组件，包括其属性、插槽、事件及应用场景。示例涵盖了基本用法、自定义内容、嵌套Dialog和居中布局，展示了如何在Vue项目中使用和配置Dialog，以满足不同交互需求。

1. Dialog对话框

1.1. Dialog对话框在保留当前页面状态的情况下, 告知用户并承载相关操作。

1.2. Attributes

参数	说明	类型	可选值	默认值
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的关闭	function(done), done用于关闭Dialog	无	无
center	是否对头部和底部采用居中布局	boolean	无	false
destroy-on-close	关闭时销毁Dialog中的元素	boolean	无	false

1.3. Slot

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

1.4. Events

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

1.5. Dialog的内容是懒渲染的, 即在第一次被打开之前, 传入的默认slot不会被渲染到DOM上。因此, 如果需要执行DOM操作, 或通过ref获取相应组件, 请在open事件回调中进行。

1.6. 如果visible属性绑定的变量位于Vuex的store内, 那么.sync不会正常工作。此时需要去除.sync修饰符, 同时监听Dialog的open和close事件, 在事件回调中执行Vuex中对应的mutation更新visible属性绑定的变量的值。

2. Dialog对话框例子

2.1. 使用脚手架新建一个名为element-ui-dialog的前端项目, 同时安装Element插件。

2.2. 编辑index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Dialog from '../components/Dialog.vue'
import MySelfDialog from '../components/MySelfDialog.vue'
import InnerDialog from '../components/InnerDialog.vue'
import CenterDialog from '../components/CenterDialog.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/Dialog' },
  { path: '/Dialog', component: Dialog },
  { path: '/MySelfDialog', component: MySelfDialog },
  { path: '/InnerDialog', component: InnerDialog },
  { path: '/CenterDialog', component: CenterDialog }
]

const router = new VueRouter({
  routes
})

export default router

2.3. 在components下创建Dialog.vue

<template>
  <div>
    <h1>基本用法</h1>
    <h4>需要设置visible属性, 它接收Boolean, 当为true时显示Dialog。Dialog分为两个部分: body和footer, footer需要具名为footer的slot。title属性用于定义标题, 它是可选的, 默认值为空。最后, 本例还展示了before-close的用法。</h4>
    <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</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>
  </div>
</template>

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

2.4. 在components下创建MySelfDialog.vue

<template>
  <div>
    <h1>自定义内容</h1>
    <h4>Dialog组件的内容可以是任意的, 甚至可以是表格或表单, 下面是应用了Element Table和Form组件的两个样例。</h4>
    <!-- Table -->
    <el-button type="success" @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 style="margin-top: 20px;"></div>
    <!-- Form -->
    <el-button @click="dialogFormVisible = true" type="primary">打开嵌套表单的 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 {
      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 弄'
      }],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px'
    }
  }
}
</script>

2.5. 在components下创建InnerDialog.vue

<template>
  <div>
    <h1>嵌套的Dialog</h1>
    <h4>正常情况下, 我们不建议使用嵌套的Dialog, 如果需要在页面上同时显示多个Dialog, 可以将它们平级放置。对于确实需要嵌套Dialog的场景, 我们提供了append-to-body属性。将内层Dialog的该属性设置为true, 它就会插入至body元素上, 从而保证内外层Dialog和遮罩层级关系的正确。</h4>
    <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,
      innerVisible: false
    }
  }
}
</script>

2.6. 在components下创建CenterDialog.vue

<template>
  <div>
    <h1>居中布局</h1>
    <h4>将center设置为true即可使标题和底部居中。center仅影响标题和底部区域。Dialog的内容是任意的, 在一些情况下, 内容并不适合居中布局。如果需要内容也水平居中, 请自行为其添加CSS。</h4>
    <el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</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>
  </div>
</template>

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

2.7. 运行项目, 访问http://localhost:8080/#/Dialog