el-dialog中handleClose

Vue.js 中的对话框控制与确认关闭逻辑

最新推荐文章于 2025-03-12 20:33:44 发布

原创最新推荐文章于 2025-03-12 20:33:44 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

这篇博客探讨了在Vue.js应用中如何使用`el-dialog`组件来控制弹窗的显示和隐藏，重点在于`dialogVisible`变量的使用以及在关闭时加入确认提示。通过`$confirm`方法实现关闭前的确认操作，捕获点击事件并执行相应的回调函数，同时在控制台打印相关信息。

<el-dialog
      :visible.sync="dialogVisible"
      width="100%"
      :before-close="handleClose"
    ></el-dialog
    // 其中dialogVisible 这个局部变量控制着弹窗的显示隐藏,vue方法中
    handleClose(done){
        this.$confirm('确定关闭吗').then(() => {
          // function(done)，done 用于关闭 Dialog
          done();
 
          console.info("点击右上角 'X' ，取消按钮或遮罩层时触发");
        }).catch(() => {
 
          console.log("点击确定时触发");
        });