有关element中message提示及confirm的优化

本文链接：https://blog.youkuaiyun.com/m0_45868673/article/details/120416002

本文介绍了一种Element UI消息组件的优化方案，包括定义不同类型的提示消息如成功、警告、错误等，并通过封装统一的确认框及警告框来提高代码复用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有关element的message组件的优化

// messsage.js
import { Message, MessageBox } from 'element-ui'
import _ from 'lodash'

function success (text) {
  Message.success({
    message: text,
    duration: 1000
  })
}

function warning (text) {
  Message.warning({
    message: text,
    duration: 1000
  })
}

function info (text) {
  Message.info({
    message: text,
    duration: 1000
  })
}

function error (text) {
  Message.error({
    message: text,
    duration: 1000
  })
}

function fail (text) {
  Message.error({
    message: text,
    duration: 1000
  })
}

function confirm ({
  message,
  title = '提示',
  confirmButtonText = '确定',
  cancelButtonText = '取消',
  type = 'warning',
  successMsg = '',
  successCallBack = null,
  cancelMsg = '操作取消',
  cancelCallBack = null,
  dangerouslyUseHTMLString = false
}) {
  MessageBox.confirm(message, title, {
    confirmButtonText,
    cancelButtonText,
    type,
    dangerouslyUseHTMLString
  }).then(() => {
    if (!_.isEmpty(successMsg)) {
      success(successMsg)
    }
    if (successCallBack) {
      successCallBack.apply(successCallBack)
    }
  }).catch(() => {
    if (!_.isEmpty(cancelMsg)) {
      info(cancelMsg)
    }
    if (cancelCallBack) {
      cancelCallBack.apply(cancelCallBack)
    }
  })
}

function alert ({
  message,
  title = '提示'
}) {
  MessageBox.alert(message, title, {
  }).then(() => {
  })
}

export default {
  success, warning, info, error, confirm, fail, alert
}

// 在其他组件中调用
import message from 'message'
message.success('成功')
message.confirm({
	message: '是否确定',
	successCallBack:()=>{
	}
})