vue 先执行完 this.$dialog .confirm({})再执行其他 if判断

你可以使用 Promise 来等待对话框的返回结果，然后再执行其他操作。例如：

this.$dialog.confirm({
  title: '确认',
  message: '确定要执行该操作吗？'
}).then((result) => {
  if (result) {
    // 用户点击了确认按钮
    // 执行其他操作
  } else {
    // 用户点击了取消按钮或者关闭了对话框
    // 不执行其他操作
  }
});

在上面的代码中，使用 Promise 来等待对话框的返回结果，当用户点击确认或取消按钮后，会调用 then 方法中的回调函数，并将用户的选择作为参数传递给该回调函数。然后根据返回结果来执行其他操作。

需要注意的是，对话框是异步的，如果后面的代码依赖于对话框的返回结果，那么需要在 then 方法中进行。

相关问题

vue this.$confirm 自定义三个按钮 代码

可以使用Element UI的Dialog组件来自定义三个按钮的confirm弹窗。

首先，在需要使用confirm弹窗的组件中引入Dialog组件和Button组件：

import { Dialog, Button } from 'element-ui';

然后，在该组件的methods中定义一个方法，用于自定义confirm弹窗：

methods: {
  myConfirm() {
    Dialog.confirm({
      title: '提示',
      message: '确定要执行该操作吗？',
      customClass: 'my-confirm',
      showCancelButton: true,
      showConfirmButton: false,
      showClose: false,
      cancelButtonText: '取消',
      cancelButtonClass: 'my-cancel-button',
      closeOnClickModal: false,
      closeOnPressEscape: false,
      beforeClose: (action, instance, done) => {
        if (action === 'cancel') {
          done();
        } else {
          // 执行确认操作
          done();
        }
      }
    });
  }
}

在myConfirm方法中，使用Dialog.confirm方法来创建一个confirm弹窗。通过传递一些参数，可以自定义弹窗的样式和功能：

- title：弹窗标题
- message：弹窗内容
- customClass：自定义弹窗类名
- showCancelButton：是否显示取消按钮
- showConfirmButton：是否显示确认按钮
- showClose：是否显示关闭按钮
- cancelButtonText：取消按钮文本
- cancelButtonClass：自定义取消按钮类名
- closeOnClickModal：是否允许点击弹窗外部关闭弹窗
- closeOnPressEscape：是否允许按下ESC键关闭弹窗
- beforeClose：弹窗关闭前的回调函数，可以在其中执行确认操作

在beforeClose回调函数中，可以根据用户操作的结果来执行相应的操作，例如调用API接口执行删除操作。

最后，在页面中使用Button组件来触发myConfirm方法即可：

<template>
  <Button type="warning" @click="myConfirm">删除</Button>
</template>

这样就可以自定义三个按钮的confirm弹窗了。

elementui this.$modal.confirm 添加动态的html语句

要在 Element UI 的 Modal 组件中添加动态的 HTML 语句，可以使用 `v-html` 指令来动态绑定 HTML。具体步骤如下：

1. 在 Modal 的主体内容中添加一个带有 `v-html` 指令的元素，例如：

<template>
  <div>
    <el-button @click="showModal">打开 Modal</el-button>
    <el-dialog :visible.sync="dialogVisible">
      <div v-html="dynamicHtml"></div>
    </el-dialog>
  </div>
</template>

2. 在 Vue 实例中定义一个变量来保存需要动态绑定的 HTML 代码，例如：

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      dynamicHtml: '',
    };
  },
  methods: {
    showModal() {
      this.dynamicHtml = '<p>这是动态绑定的 HTML 代码</p>';
      this.dialogVisible = true;
    },
  },
};
</script>

这样，当 Modal 弹窗显示时，`v-html` 指令会将 `dynamicHtml` 变量中保存的 HTML 代码渲染到对应位置上。需要注意的是，由于 `v-html` 指令会将 HTML 解析为 DOM 元素，因此需要确保动态绑定的 HTML 代码是安全的，避免 XSS 攻击。