创建一个可重复使用的自定义confirm,利用vue混入方式即可随时使用。
const confirmMixin = {
methods: {
showModal(modalData, interfaceData) {
const _this = this
const {title, content, okType, okText, icon,cancelText, width} = modalData
const {params, func, success,error = () => {}, successMsg = '', errorMsg = '', cancelFunc = () => {}, okButtonProps,cancelButtonProps} = interfaceData
this.$confirm({
title,
content,
okType,
width,
okText,
icon,
cancelText,
okButtonProps,
cancelButtonProps,
onOk() {
return new Promise(function (resolve, reject) {
setTimeout(async function () {
const res = await func(params)
if (res.success) {
success(res)
successMsg ? _this.$message.success(successMsg) : ''
resolve()
} else {
error(res)
reject()
_this.$message.warning(errorMsg ? errorMsg : res.message)
}
}, 500)
}).catch((err) => console.log(err))
},
onCancel: cancelFunc ? cancelFunc : '',
})
},
}
}
export {confirmMixin}
然后在模块中使用即可:
import { confirmMixin } from '@/mixins/confirmMixin'
export default {
name: 'test',
mixins: [confirmMixin],
data() {
return {}
}