您的位置:

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支持多种类型的确认框,包括警告框、提醒框、成功框等,相关配置项如下表所示:

类型 描述 参数
warning 警告框 类型为“warning”
info 提醒框 类型为“info”
success 成功框 类型为“success”
error 错误框 类型为“error”

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

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

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

5.自定义图标

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

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

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