[TOC] #### 1. dialog 介绍 --- 本文使用的版本：element-ui v2.15.13 官方文档：在保留当前页面状态的情况下，告知用户并承载相关操作 dialog 组件用于弹出一个对话框，适合定制性较大的场景。例如：做一个弹出层表单，如果对话框中的表单项较多，建议封装为一个组件，可以更好的修改对话框相关内容，而且这个对话框可能在其他页面也会被使用 可以将 dialog 分为三个部分：header、body、footer header：对话框最上方区域，header 的左边是 dialog 的 **title 属性值**，右边是 **关闭按钮** body：el-dialog 组件内容的非 slot 内容，会被插入到对话框的 body 中 footer：footer 需要具名为 footer 的 slot ```html <el-dialog title="提示" width="30%" :visible="dialogVisible"> <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> ```  #### 2. dialog 属性 --- 下面列举的是 el-dialog 最常用的属性，更多属性查看文档即可： | 属性 | 说明 | 默认值 | | ------------ | ------------ | ------------ | | title | dialog 的标题 | - | | visible | 对话框是否显示 | false | | width | dialog 的宽度 | 50% | | show-close | 是否显示右上角的关闭按钮 | true | | before-close | 关闭前的回调，会暂停 Dialog 的关闭 | - | | modal | 是否需要遮罩层 | true | | close-on-click-modal | 点击遮罩是否关闭 dialog | true | | close-on-press-escape | 按下 ESC 是否关闭 dialog | true | | lock-scroll | 对话框出现时是否将 body 滚动锁定 | true | #### 3. 关闭对话框 --- **点击 modal、按下 ESC、点击关闭按钮** 这三种方式都会触发 before-close（关闭前的回调） ```html <el-dialog :visible="dialogVisible" :before-close="handleClose"> </el-dialog> ``` ```javascript methods: { handleClose() { this.dialogVisible = false; } } ``` 当关闭对话框后如果需要执行一些操作，比如：重置对话框中的内容，可以使用 `@closed` ```html <el-dialog :visible="isShow" :before-close="handleClose" @closed="dialogClosed"> </el-dialog> ``` ```javascript methods: { dialogClosed() { this.$refs.offerForm.resetFields(); } } ``` #### 4. 自定义内容 --- Dialog 组件的内容可以是任意的，甚至可以是表格或表单 ```html <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> ``` #### 5. dialog 封装 --- 对话框经常被用于弹窗表单，并且这个对话框还可能用于其他页面，为了可读性和可维护性，也应该将其封装为单独的组件 下面介绍将对话框表单封装为组件的示例： ```html <template> <el-dialog title="收集用户信息" :visible.sync="isShow" :close-on-click-modal="false" :before-close="before" @closed="closed" > <el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form-item label="姓名" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="介绍" prop="desc"> <el-input type="textarea" v-model="form.desc"></el-input> </el-form-item> <el-form-item> <el-button :loading="loading" type="primary" @click="onSubmit"> 提交 </el-button> <el-button @click="before()">取消</el-button> </el-form-item> </el-form> </el-dialog> </template> <script> export default { props: { isShow: { type: Boolean, default: false, }, }, data() { return { form: {}, rules: { name: [{ required: true, message: "请输入姓名", trigger: "blur" }], desc: [{ required: true, message: "请输入介绍", trigger: "blur" }], }, loading: false, }; }, methods: { /** * 关闭前的回调 */ before() { this.$emit("close"); }, /** * 关闭动画结束时的回调 */ closed() { this.$refs.form.resetFields(); }, /** * 提交表单 */ onSubmit() { this.$refs.form.validate(valid => { console.log(valid); if (valid) { this.loading = true; console.log(this.form); // 模拟接口请求 setTimeout(() => { this.$message.success("提交成功"); this.loading = false; this.before(); }, 2000); } }); }, }, }; </script> ``` 使用封装的对话框组件： ```html <template> <div> <el-button @click="dialogShow = true">打开表单</el-button> <user :isShow="dialogShow" @close="dialogShow = false" /> </div> </template> <script> import User from "@/components/diglog/User.vue"; export default { components: { User, }, data() { return { dialogShow: false, }; }, }; </script> ```