vue弹出二次确认的终极宝典：用代码暴力解决你的疑问

前端

2023-09-01 17:51:42

巧用 Vue 弹出二次确认弹窗

在日常开发中，我们经常需要实现二次确认的弹窗，以防止用户误操作造成不可挽回的后果。本文将深入浅出地介绍如何在 Vue 中使用 el-dialog 和 Promise 实现二次确认弹窗。

理解 Promise

Promise 是 ES6 中引入的一种新的语法特性，它代表着异步操作的最终完成或失败及其结果值。Promise 对象有三种状态：

等待：表示异步操作尚未完成。
完成：表示异步操作已完成，并成功返回结果值。
失败：表示异步操作已完成，但由于某种原因导致失败。

Promise 对象提供了两个方法：then() 和 catch()，这两个方法可以用来处理异步操作的结果。

then() ：当异步操作完成并成功返回结果值时，then() 方法会被调用。
catch() ：当异步操作完成但由于某种原因导致失败时，catch() 方法会被调用。

使用 el-dialog 和 Promise 封装二次确认弹窗

接下来，我们将使用 Vue 中的 el-dialog 和 Promise 来实现一个二次确认弹窗。

步骤

安装 el-dialog 库。
在 Vue 组件中引入 el-dialog 库。
创建一个二次确认弹窗组件。
在二次确认弹窗组件中使用 el-dialog 和 Promise 来实现二次确认的功能。
在需要使用二次确认弹窗的地方使用二次确认弹窗组件。

代码示例

// 二次确认弹窗组件
import { ElDialog } from 'element-plus'

export default {
  name: 'ConfirmDialog',
  props: {
    title: {
      type: String,
      default: '确认'
    },
    content: {
      type: String,
      default: '你确定要执行此操作吗？'
    },
    okText: {
      type: String,
      default: '确定'
    },
    cancelText: {
      type: String,
      default: '取消'
    }
  },
  methods: {
    showConfirmDialog() {
      return new Promise((resolve, reject) => {
        this.$dialog({
          title: this.title,
          content: this.content,
          okText: this.okText,
          cancelText: this.cancelText,
          onOk: () => {
            resolve()
          },
          onCancel: () => {
            reject()
          }
        })
      })
    }
  }
}

// 使用二次确认弹窗组件
import ConfirmDialog from './ConfirmDialog.vue'

export default {
  name: 'App',
  components: {
    ConfirmDialog
  },
  methods: {
    showDeleteConfirmDialog() {
      const confirmDialog = this.$refs.confirmDialog
      confirmDialog.showConfirmDialog().then(() => {
        // 删除操作
      }).catch(() => {
        // 取消操作
      })
    }
  }
}