Element Dialog

妖狐艹你老母 2022-12-23 06:24 163阅读 0赞

一般情况下，Dialog有以下两种写法：

## 第一种写法：点击关闭或空白处无需特别处理，dialog内部分修改当前值的状态，通过snync传递给父组件 ##

<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
    </el-dialog>

示例：

<template>
      <div>
        <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
          <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>
      </div>
    </template>
    <script> export default { data () { return { dialogVisible: false } }, methods: { handleClose (done) { this.$confirm('确认关闭？') .then(_ => { done() }) .catch(_ => { }) } } } </script>

## 第二种写法：需要在beforeClose方法内手动处理this.dialogVisible=false ##

<el-dialog title="提示" :visible="dialogVisible" width="30%" :before-close="handleClose">
    </el-dialog>

示例：

<template>
      <div>
        <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
        <el-dialog title="提示" :visible="dialogVisible" width="30%" :before-close="handleClose">
          <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>
      </div>
    </template>
    <script> export default { data () { return { dialogVisible: false } }, methods: { handleClose (done) { this.$confirm('确认关闭？') .then(_ => { this.dialogVisible = false // 手动关闭 done() }) .catch(_ => { }) } } } </script>

单击Dialog右上角的x，弹出确认框，单击确认对话框关闭。如果没有上面Javascript中的手动关闭的代码，单击确认对话框后Dialog不会关闭