Dialog 对话框

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

基本用法

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

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

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

View Code