AntDesign の MessageAPI

AntDesignを使っていれば this.$message.info('Hello') などで利用が可能となっています。

素晴らしいですね。

複数行表示したい

ヒーリングっど♥プリキュアは2020年春からの放映なのでそれも伝える必要があります。
なので2行表示にしたかったためとりあえず改行コードを入れてみます。

おもてたんとちがう…

もちろん <br> を入れてもそのまま表示されてしまいます。
このままでは来年春から始まる新しいプリキュアの素晴らしさがうまく伝わりません。

Stringでは無理

MessageAPIの info 関数は第一引数に string | VNode | (h) => VNode を取ります。
ということで string では無理そうなので他のものを試します。

VNodeって？

こちらで解説してくれていますが仮想ノードにあたります。
要するにこのあたりには直接仮想ノードを渡せますよーということみたいです。

VNodeの作り方

ドキュメントにもあるとおり createElement 関数で作成するのが一般的なようです。
しかし render 内ではないので該当の関数がありませんが h がそれにあたるようです。

createElement を h にエイリアスしていることは、 Vue のエコシステムの中でよく見かける慣習です。そして、それは実は JSX には必須です。Vue の Babel プラグインのバージョン 3.4.0 以降では、ES2015 のシンタックスで宣言された JSX を含むメソッドや getter（関数やアロー関数は対象外）に対しては、自動的に const h = this.$createElement が注入されるため、(h) パラメーターは省略できます。それ以前のバージョンでは、もし h がそのスコープ内で利用可能でない場合、アプリケーションはエラーを throw するでしょう。

ということだそうです。
ん？ this.$createElement でもええんか…？

ということで

this.$message.info(h => {
  return h('span', [
    h('span', 'ヒーリングっど♥プリキュア'),
    h('br'),
    h('span', '2020年春からスタート！')
  ])
})

ヒャッホウ！！
改行だけでなくハートマークを赤くもできますね。

動作確認したやつ置いときますね。

面倒くさくない？

JSX でもできるみたいです、使えるなら絶対そっちのがいい。
公式もそう言ってます。

次は @karur4n が何かしら書いてくれると思います。
面白い人なので記事もきっと面白いんだろうなあと思います。
ぜひよろしくお願いします。