在utils中封装公共方法,在main.js中引入使用
const getAlert = (res, p, showButton, _this, callback, callback1) => {
_this
.$confirm(res, '提示', {
confirmButtonText: '确定',
showCancelButton: showButton,
closeOnClickModal: false,
showClose: false,
type: p
})
.then((result) => {
if (callback) {
callback()
}
})
.catch(() => {
if (callback1) {
callback1()
}
})
}
const getConfirm = (res, p, _this, callback) => {
_this
.$confirm(res, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
closeOnClickModal: false,
showClose: false,
type: p
})
.then(() => {
if (callback) {
callback()
}
})
.catch(() => {})
}
const multiPop = (msgArr, p, showButton, _this, callback, callback1) => {
const newMsgArr = []
const h = _this.$createElement
for (const i in msgArr) {
newMsgArr.push(h('p', null, msgArr[i]))
}
_this
.$confirm('提示', {
title: '提示',
type: p,
message: h('div', null, newMsgArr),
showCancelButton: showButton,
confirmButtonText: '确定',
closeOnClickModal: false,
showClose: false
})
.then(() => {
if (callback) {
callback()
}
})
.catch(() => {
if (callback1) {
callback1()
}
})
}
export { getAlert, getConfirm, multiPop }
在mian.js中引入使用
import { getAlert, getConfirm, multiPop } from '@/utils/common'
Vue.prototype.$pop = getAlert
Vue.prototype.$popConfirm = getConfirm
Vue.prototype.$popMul = multiPop
vue中使用样式
return this.$alert(`保存成功!`, '提示', {
confirmButtonText: '确定',
type:"warning"
});
return this.$pop('保存成功!', 'warning', false, this)
return this.$confirm('保存成功!', '提示', {
confirmButtonText: '确定',
showCancelButton: false,
type: 'warning'
})