element message plus

element-message-plus

ElementUI Message元件增強

同一時間，相同type和message的組件實例只允許創建一次,

解決多個相同的message 會重複建立顯示

安裝依賴

 pnpm install element-message-plus

全局引入

 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" ) ; 

配置

預設配置,替換預設的$message

 Vue . use ( MessagePlus ) ;

自訂掛載，可自訂全域掛載的位置

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

在JS 使用

參數類型ElMessageOptions ,與官方文件一致

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

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

在Vue 元件中使用

參數類型ElMessageOptions ,與官方文件一致

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