一、封装辅助函数
import { Message, Notification, MessageBox } from 'element-ui' ; let currentMessage = null ;
let currentMessageBox = null ;
let currentNotification = null ; export function elMessage ( options ) { if ( currentMessage) { currentMessage. close ( ) ; } currentMessage = Message ( options) ;
} [ 'error' , 'success' , 'info' , 'warning' ] . forEach ( ( type ) => { elMessage[ type] = ( options ) => { if ( typeof options === 'string' ) { options = { message: options, } ; } options. type = type; return elMessage ( options) ; } ;
} ) ; export function elMessageBox ( config, closeBack ) { if ( currentMessageBox && currentMessageBox. close) { currentMessageBox. close ( ) ; } currentMessageBox = MessageBox ( { ... config, callback ( ) { if ( closeBack) { closeBack ( ) ; } currentMessageBox = null ; } , } ) ;
} export function elNotification ( config, closeBack ) { if ( currentNotification && currentNotification. close) { currentNotification. close ( ) ; } currentNotification = Notification ( { ... config, onClose ( ) { if ( closeBack) { closeBack ( ) ; } currentNotification = null ; } , } ) ;
}
二、全局引入
import { elMessage, elMessageBox, elNotification } from '@/utils/el-hint' ;
import i18n from './lang/index' ;
import ElementUI from 'element-ui' ;
import 'element-ui/lib/theme-chalk/index.css' ; Vue. use ( ElementUI, { size: 'medium' , i18n : ( key, value ) => i18n. t ( key, value)
} ) ;
Vue . prototype. $message = elMessage;
Vue . prototype. $elMessageBox = elMessageBox;
Vue . prototype. $elNotification = elNotification;
三、使用
this . $message. success ( '1111' ) ; this . $elMessageBox ( { title: '标题' , message: '111' , showClose: false ,
} , ( ) => {
} ) ; this . $elNotification ( { title: '111' , message: '222' , type: 'error'
} , ( ) => {
} ) ;