[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> ```