vue3+view-ui-plus中封装Message

vue3+view-ui-plus中封装Message

import { Message } from 'view-ui-plus'
const MessageSuccess = (text = '成功') => {
  Message.info({
    content: text,
    duration: 10,
    background: true,
    closable: true
  });
}
const MessageError = (text = '错误') => {
  Message.error({
    content: text,
    duration: 10,
    background: true,
    closable: true
  });
}
const MessageInfo = (text = '提示') => {
  Message.info({
    content: text,
    duration: 10,
    background: true,
    closable: true
  });
}
const MessageWarning = (text = '警告') => {
  Message.warning({
    content: text,
    duration: 10,
    background: true,
    closable: true
  });
}
const common = {
  MessageSuccess,
  MessageError,
  MessageInfo,
  MessageWarning
}
export default common

引入

在main.js中将message注册成能够被应用内所有组件实例访问到的全局属性对象。

// 对view-ui-plus的message进行二次封装
import messagebox from '@/utils/message'
app.config.globalProperties.$MessageBox = messagebox

在组件中的使用方式

// 获取上下文实例，proxy等同于vue2中的this
const { proxy } = getCurrentInstance();
proxy.$MessageBox.MessageSuccess(err)
proxy.$MessageBox.MessageError(err)
proxy.$MessageBox.MessageInfo(err)
proxy.$MessageBox.MessageWarning(err)