vue3+view-ui-plus でメッセージをカプセル化する
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 に登録します。
// 对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)