element message plus

élément-message-plus

Amélioration du composant Message ElementUI

Dans le même temps, les instances de composants du même type et du même message ne peuvent être créées qu'une seule fois.

La résolution de plusieurs messages identiques créera des affichages en double

Installer les dépendances

 pnpm install element-message-plus

Présentation mondiale

 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

Configuration par défaut, remplacez le $message par défaut

 Vue . use ( MessagePlus ) ;

Montage personnalisé, vous pouvez personnaliser l'emplacement du montage global

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

Utiliser en JS

Type de paramètre ElMessageOptions , conforme à la documentation officielle

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

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

Utilisé dans les composants Vue

Type de paramètre ElMessageOptions , conforme à la documentation officielle

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