• Dialog 对话框
    • 基本用法
    • 自定义内容
    • 嵌套的 Dialog
    • 居中布局
    • Attributes
    • Slot
    • Events

    Dialog 对话框

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

    基本用法

    Dialog 弹出一个对话框,适合需要定制性更大的场景。

    Dialog 对话框 - 图1

    需要设置visible属性,它接收Boolean,当为true时显示 Dialog。Dialog 分为两个部分:bodyfooterfooter需要具名为footerslottitle属性用于定义标题,它是可选的,默认值为空。最后,本例还展示了before-close的用法。

    1. <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
    2. <el-dialog
    3. title="提示"
    4. :visible.sync="dialogVisible"
    5. width="30%"
    6. :before-close="handleClose">
    7. <span>这是一段信息</span>
    8. <span slot="footer" class="dialog-footer">
    9. <el-button @click="dialogVisible = false">取 消</el-button>
    10. <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    11. </span>
    12. </el-dialog>
    13. <script>
    14. export default {
    15. data() {
    16. return {
    17. dialogVisible: false
    18. };
    19. },
    20. methods: {
    21. handleClose(done) {
    22. this.$confirm('确认关闭?')
    23. .then(_ => {
    24. done();
    25. })
    26. .catch(_ => {});
    27. }
    28. }
    29. };
    30. </script>

    before-close 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。如果你在 footer 具名 slot 里添加了用于关闭 Dialog 的按钮,那么可以在按钮的点击回调函数里加入 before-close 的相关逻辑。

    自定义内容

    Dialog 组件的内容可以是任意的,甚至可以是表格或表单,下面是应用了 Element Table 和 Form 组件的两个样例。

    Dialog 对话框 - 图2
    Dialog 对话框 - 图3

    1. <!-- Table -->
    2. <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
    3. <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
    4. <el-table :data="gridData">
    5. <el-table-column property="date" label="日期" width="150"></el-table-column>
    6. <el-table-column property="name" label="姓名" width="200"></el-table-column>
    7. <el-table-column property="address" label="地址"></el-table-column>
    8. </el-table>
    9. </el-dialog>
    10. <!-- Form -->
    11. <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
    12. <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
    13. <el-form :model="form">
    14. <el-form-item label="活动名称" :label-width="formLabelWidth">
    15. <el-input v-model="form.name" auto-complete="off"></el-input>
    16. </el-form-item>
    17. <el-form-item label="活动区域" :label-width="formLabelWidth">
    18. <el-select v-model="form.region" placeholder="请选择活动区域">
    19. <el-option label="区域一" value="shanghai"></el-option>
    20. <el-option label="区域二" value="beijing"></el-option>
    21. </el-select>
    22. </el-form-item>
    23. </el-form>
    24. <div slot="footer" class="dialog-footer">
    25. <el-button @click="dialogFormVisible = false">取 消</el-button>
    26. <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
    27. </div>
    28. </el-dialog>
    29. <script>
    30. export default {
    31. data() {
    32. return {
    33. gridData: [{
    34. date: '2016-05-02',
    35. name: '王小虎',
    36. address: '上海市普陀区金沙江路 1518 弄'
    37. }, {
    38. date: '2016-05-04',
    39. name: '王小虎',
    40. address: '上海市普陀区金沙江路 1518 弄'
    41. }, {
    42. date: '2016-05-01',
    43. name: '王小虎',
    44. address: '上海市普陀区金沙江路 1518 弄'
    45. }, {
    46. date: '2016-05-03',
    47. name: '王小虎',
    48. address: '上海市普陀区金沙江路 1518 弄'
    49. }],
    50. dialogTableVisible: false,
    51. dialogFormVisible: false,
    52. form: {
    53. name: '',
    54. region: '',
    55. date1: '',
    56. date2: '',
    57. delivery: false,
    58. type: [],
    59. resource: '',
    60. desc: ''
    61. },
    62. formLabelWidth: '120px'
    63. };
    64. }
    65. };
    66. </script>

    嵌套的 Dialog

    如果需要在一个 Dialog 内部嵌套另一个 Dialog,需要使用 append-to-body 属性。

    Dialog 对话框 - 图4

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

    1. <template>
    2. <el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button>
    3. <el-dialog title="外层 Dialog" :visible.sync="outerVisible">
    4. <el-dialog
    5. width="30%"
    6. title="内层 Dialog"
    7. :visible.sync="innerVisible"
    8. append-to-body>
    9. </el-dialog>
    10. <div slot="footer" class="dialog-footer">
    11. <el-button @click="outerVisible = false">取 消</el-button>
    12. <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
    13. </div>
    14. </el-dialog>
    15. </template>
    16. <script>
    17. export default {
    18. data() {
    19. return {
    20. outerVisible: false,
    21. innerVisible: false
    22. };
    23. }
    24. }
    25. </script>

    居中布局

    标题和底部可水平居中

    Dialog 对话框 - 图5

    center设置为true即可使标题和底部居中。center仅影响标题和底部区域。Dialog 的内容是任意的,在一些情况下,内容并不适合居中布局。如果需要内容也水平居中,请自行为其添加 CSS。

    1. <el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button>
    2. <el-dialog
    3. title="提示"
    4. :visible.sync="centerDialogVisible"
    5. width="30%"
    6. center>
    7. <span>需要注意的是内容是默认不居中的</span>
    8. <span slot="footer" class="dialog-footer">
    9. <el-button @click="centerDialogVisible = false">取 消</el-button>
    10. <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
    11. </span>
    12. </el-dialog>
    13. <script>
    14. export default {
    15. data() {
    16. return {
    17. centerDialogVisible: false
    18. };
    19. }
    20. };
    21. </script>

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

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

    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

    Slot

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

    Events

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

    原文: http://element-cn.eleme.io/#/zh-CN/component/dialog