Vue$confirm的详细阐述

一、Vue$confirm的作用

Vue$confirm是一个非常实用的Vue.js插件，它提供了一个简单易用的确认框组件，可以用于在用户执行某个敏感操作之前进行二次确认，以防止误操作。如删除操作、修改等。

Vue$confirm可以根据传入的参数，自动构建一个确认框，并且支持自定义样式、内容、按钮等。同时，它还可以根据不同的情况返回一个Promise对象，以便在用户点击确定或取消后执行相应的操作。

二、使用Vue$confirm

Vue$confirm的用法非常简单，只需要在Vue实例中引入它，并调用它即可。

Vue.prototype.$confirm = function (text, title, options = {}) {
  return new Promise((resolve, reject) => {
    try {
      const confirmConstructor = Vue.extend(Confirm)
      const confirmInstance = new confirmConstructor({
        el: document.createElement('div'),
        propsData: {
          title: title,
          text: text,
          type: options.type,
          showModalIcon: options.showModalIcon,
          cancelButtonText: options.cancelButtonText || '取消',
          confirmButtonText: options.confirmButtonText || '确定',
        },
        methods: {
          handleCancel() {
            resolve(false)
          },
          handleConfirm() {
            resolve(true)
          }
        }
      })
      document.body.appendChild(confirmInstance.$el)
    } catch (error) {
      reject(error)
    }
  })
}

上述代码中，我们将Vue的原型对象中新增了一个$confirm方法，该方法接收3个参数：

• text：确认框中的提示文本
• title：确认框的标题
• options：可选的配置参数，如类型、文字等

在Vue实例中调用$confirm方法即可弹出确认框。

this.$confirm('确定要删除吗？', '提示', {
  type: 'warning'
}).then(() => {
  this.delete() // 用户点击确定后执行的操作
}).catch(() => {
  // 用户点击取消后执行的操作
})

在上述代码中，我们调用$confirm方法弹出了一个提示框，询问用户是否确定执行删除操作。如果用户点击确定，则执行delete方法；如果用户点击取消，则不执行任何操作。

三、Vue$confirm的自定义

Vue$confirm还支持多种用户自定义，下面我们就来一一介绍：

1. 自定义样式

我们可以通过传入CSS类名来自定义样式，如下代码：

this.$confirm('确定要删除吗？', '提示', {
  type: 'warning',
  confirmButtonText: '删除',
  cancelButtonText: '取消',
  customClass: 'my-custom-class'
}).then(() => {
  this.delete() // 用户点击确定后执行的操作
}).catch(() => {
  // 用户点击取消后执行的操作
})

上述代码中，我们传入了一个名为“my-custom-class”的CSS类名，以自定义样式。

2. 自定义文字

我们可以通过传入confirmButtonText和cancelButtonText属性来自定义确认框中按钮的文字，如下代码：

this.$confirm('确定要删除吗？', '提示', {
  type: 'warning',
  confirmButtonText: '删除',
  cancelButtonText: '取消',
}).then(() => {
  this.delete() // 用户点击确定后执行的操作
}).catch(() => {
  // 用户点击取消后执行的操作
})

上述代码中，我们通过传入confirmButtonText和cancelButtonText属性来自定义确认框中按钮的文字。

3. 自定义标题

我们可以通过传入title属性来自定义确认框的标题，如下代码：

this.$confirm('确定要删除吗？', '温馨提示', {
  type: 'warning'
}).then(() => {
  this.delete() // 用户点击确定后执行的操作
}).catch(() => {
  // 用户点击取消后执行的操作
})

上述代码中，我们通过传入title属性来自定义确认框的标题。

4. 自定义类型

Vue$confirm支持多种类型的确认框，包括警告框、提醒框、成功框等，相关配置项如下表所示：

我们可以通过传入type属性来自定义确认框的类型，如下代码：

this.$confirm('确定要删除吗？', '提示', {
  type: 'warning'
}).then(() => {
  this.delete() // 用户点击确定后执行的操作
}).catch(() => {
  // 用户点击取消后执行的操作
})

上述代码中，我们通过传入type属性来自定义确认框的类型为“warning”。

5.自定义图标

我们可以通过传入showModalIcon属性来自定义确认框的图标，默认为true，如下代码：

this.$confirm('你确定要离开吗？', '提示', {
  showModalIcon: false
  })

上述代码中，我们通过传入showModalIcon属性并将值设置为false来关闭默认的图标。