一、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来关闭默认的图标。