el-dialog关闭方法
    el-dialog 是 ElementUI 中的一个组件，用于显示弹出窗口。在一些界面编程中，需要弹出一些窗口来显示一些提示信息或者获取一些用户输入，而 el-dialog 就是一个非常方便的组件。但是有时候在窗口关闭之前需要执行一些操作，比如提交数据或者更新页面数据等。本文就来介绍 el-dialog 的一些关闭方法以及如何在关闭窗口之前执行一些操作。
    1. 使用 x 号关闭
    通过在 Dialog 组件中添加一个带有 icon class 的 span 标签来实现。这种方法比较简单，只需要将 visible 属性设置为 false 即可关闭窗口，如下所示：
    ```html
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      width="30%"
    >
      <span
        slot="header"
        class="dialog-close"
        @click="dialogVisible = false"
      >
        <i class="el-icon-close"></i>
elementui登录界面
      </span>
      <p>确认删除此条数据吗？</p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </div>
    </el-dialog>
    ```
    其中，关闭按钮的部分代码如下所示：
    ```html
    <span
      slot="header"
      class="dialog-close"
      @click="dialogVisible = false"
    >
      <i class="el-icon-close"></i>
    </span>
    ```
    其中 "@click" 事件绑定了一个方法来关闭窗口，代码如下所示：
    ```js
    data() {
      return {
        dialogVisible: false
      }
    },
    methods: {
      handleClose: function(done) {
        console.log('handleClose');
        done();
      }
    }
    ```
    需要注意的是，如果需要在关闭窗口之前执行一些操作，可以使用 Dialog 的 before-close 属性，如下所示：
    其中的 ":before-close" 属性指定了一个方法作为对话框关闭前的回调。在这个方法里，可
以执行一些操作，比如提交表单数据等。
    2. 使用组件方法关闭
    除了在窗口中显示关闭按钮外，还可以通过组件的方法来关闭窗口。Dialog 组件提供了 $emit 和 $refs 两种方式来触发组件方法。
    下面是使用 $emit 方法关闭窗口的示例代码：
    在 Vue 实例中可以添加如下代码：
    使用 $refs 来获取窗口实例，通过设置 visible 属性来关闭窗口，如下所示：
    ```js
    this.$Dialog.visible = false;
    ```
    在调用 close 方法时，会先执行需要执行的操作，然后关闭窗口。
    总结
    以上就是 el-dialog 的两种关闭方法，可以根据具体情况选择使用哪种方法。需要注意的是，在关闭窗口时可能需要执行一些操作，在这种情况下可以使用 Dialog 的 before-close 属性或者组件的 close 方法来实现。使用这些方法，可以在关闭窗口时执行一些自定义的逻辑。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。