element message plus

element-message-plus

ElementUI Message component enhancement

At the same time, component instances of the same type and message are only allowed to be created once.

Resolving multiple identical messages will create duplicate displays

Install dependencies

 pnpm install element-message-plus

Global introduction

 import Vue from "vue" ;
import App from "./App.vue" ;

import ElementUI from "element-ui" ;
import "element-ui/lib/theme-chalk/index.css" ;

import MessagePlus from "element-message-plus" ;

Vue . config . productionTip = false ;

Vue . use ( ElementUI ) ;

Vue . use ( MessagePlus ) ;

new Vue ( {
  render : ( h ) => h ( App ) ,
} ) . $mount ( "#app" ) ; 

Configuration

Default configuration, replace the default $message

 Vue . use ( MessagePlus ) ;

Custom mount, you can customize the location of global mount

 Vue . use ( MessagePlus , { target : "$Message" } ) ; 

Use in JS

Parameter type ElMessageOptions , consistent with official documentation

...
import { MessagePlus } from "element-message-plus" ;
...

MessagePlus ( ) ;
MessagePlus . info ( ) ;
MessagePlus . success ( ) ;
MessagePlus . warning ( ) ;
MessagePlus . error ( ) ;
MessagePlus . closeAll ( ) 

Used in Vue components

Parameter type ElMessageOptions , consistent with official documentation

 this . $message ( ) ;
this . $message . info ( ) ;
this . $message . success ( ) ;
this . $message . warning ( ) ;
this . $message . error ( ) ;
this . $message . closeAll ( ) ;