長野エンジニアライフ

東京から長野に移住したエンジニアのブログです。🦒🗻⛰

ElementUIのMessageを積まずに表示する方法

ElementUIのバージョン2.8.2では同じ箇所にメッセージが表示される。
【2.8.2で動作確認】 2.8.2

だがしかし、2.9.0以降メッセージが積まれて表示される(スタックモード)仕様に変更された。
【2.9.2で動作確認】 2.9.2

github.com

2.9.0以降でも積まずに表示したい

以下の理由で、どうしても積みたくないときは

  • どうしても積まずに表示したい
  • 仕様に反してもいい

メッセージを表示する直前にthis.$message.closeAll();を呼び出して、積まれているメッセージを全消してあげれば
ElementUIのMessageを積まずに表示する事ができる。

var Main = {
    methods: {
      open() {
        // メッセージを表示する前に全消する
        this.$message.closeAll();
        // メッセージを表示
        this.$message.error('Oops, this is a error message.');
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

See the Pen ElementUIのMessageを詰まずに表示する方法 by kawanobekenji (@kawaken_7) on CodePen.