[TOC] #### 1. dialog 介紹 --- 本文使用的版本：element-ui v2.15.13 官方文檔：在保留當(dāng)前頁(yè)面狀態(tài)的情況下，告知用戶(hù)并承載相關(guān)操作 dialog 組件用于彈出一個(gè)對(duì)話(huà)框，適合定制性較大的場(chǎng)景。例如：做一個(gè)彈出層表單，如果對(duì)話(huà)框中的表單項(xiàng)較多，建議封裝為一個(gè)組件，可以更好的修改對(duì)話(huà)框相關(guān)內(nèi)容，而且這個(gè)對(duì)話(huà)框可能在其他頁(yè)面也會(huì)被使用 可以將 dialog 分為三個(gè)部分：header、body、footer header：對(duì)話(huà)框最上方區(qū)域，header 的左邊是 dialog 的 **title 屬性值**，右邊是 **關(guān)閉按鈕** body：el-dialog 組件內(nèi)容的非 slot 內(nèi)容，會(huì)被插入到對(duì)話(huà)框的 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 最常用的屬性，更多屬性查看文檔即可： | 屬性 | 說(shuō)明 | 默認(rèn)值 | | ------------ | ------------ | ------------ | | title | dialog 的標(biāo)題 | - | | visible | 對(duì)話(huà)框是否顯示 | false | | width | dialog 的寬度 | 50% | | show-close | 是否顯示右上角的關(guān)閉按鈕 | true | | before-close | 關(guān)閉前的回調(diào)，會(huì)暫停 Dialog 的關(guān)閉 | - | | modal | 是否需要遮罩層 | true | | close-on-click-modal | 點(diǎn)擊遮罩是否關(guān)閉 dialog | true | | close-on-press-escape | 按下 ESC 是否關(guān)閉 dialog | true | | lock-scroll | 對(duì)話(huà)框出現(xiàn)時(shí)是否將 body 滾動(dòng)鎖定 | true | #### 3. 關(guān)閉對(duì)話(huà)框 --- **點(diǎn)擊 modal、按下 ESC、點(diǎn)擊關(guān)閉按鈕** 這三種方式都會(huì)觸發(fā) before-close（關(guān)閉前的回調(diào)） ```html <el-dialog :visible="dialogVisible" :before-close="handleClose"> </el-dialog> ``` ```javascript methods: { handleClose() { this.dialogVisible = false; } } ``` 當(dāng)關(guān)閉對(duì)話(huà)框后如果需要執(zhí)行一些操作，比如：重置對(duì)話(huà)框中的內(nèi)容，可以使用 `@closed` ```html <el-dialog :visible="isShow" :before-close="handleClose" @closed="dialogClosed"> </el-dialog> ``` ```javascript methods: { dialogClosed() { this.$refs.offerForm.resetFields(); } } ``` #### 4. 自定義內(nèi)容 --- Dialog 組件的內(nèi)容可以是任意的，甚至可以是表格或表單 ```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 封裝 --- 對(duì)話(huà)框經(jīng)常被用于彈窗表單，并且這個(gè)對(duì)話(huà)框還可能用于其他頁(yè)面，為了可讀性和可維護(hù)性，也應(yīng)該將其封裝為單獨(dú)的組件 下面介紹將對(duì)話(huà)框表單封裝為組件的示例： ```html <template> <el-dialog title="收集用戶(hù)信息" :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: "請(qǐng)輸入姓名", trigger: "blur" }], desc: [{ required: true, message: "請(qǐng)輸入介紹", trigger: "blur" }], }, loading: false, }; }, methods: { /** * 關(guān)閉前的回調(diào) */ before() { this.$emit("close"); }, /** * 關(guān)閉動(dòng)畫(huà)結(jié)束時(shí)的回調(diào) */ closed() { this.$refs.form.resetFields(); }, /** * 提交表單 */ onSubmit() { this.$refs.form.validate(valid => { console.log(valid); if (valid) { this.loading = true; console.log(this.form); // 模擬接口請(qǐng)求 setTimeout(() => { this.$message.success("提交成功"); this.loading = false; this.before(); }, 2000); } }); }, }, }; </script> ``` 使用封裝的對(duì)話(huà)框組件： ```html <template> <div> <el-button @click="dialogShow = true">打開(kāi)表單</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> ```