Zenn
❣️

Vue使ってるならモーダルはSweetAlertでチャチャッと実装しよう

2021/04/19に公開
Vue.js
npm
tech

完成物

こういうやつ作ります。

導入

まずはインストール

npm i vue-swal

パッケージはnpmでインストールする派です。ちなみにパンは固め派。

swalっていうのは、 SweetAlertの略みたい。

プロジェクトにインポート

// vue-swalというプラグインを、VueSwalという名前でインポート
// 以後、このプラグインはVueSwalという名前で使われる
import VueSwal from 'vue-swal'
// Vue.useでインポートしたプラグインを使える状態にする
Vue.use(VueSwal)

プロジェクトにimport文を書きましょう。
私はVue CLIのプロジェクトに入れたので、main.js（またはapp.js）に書きました。

設置

this.$swal({
    title: "タイトル",
    html: "モーダルの中身です。<br>HTML文を書くことも出来ます。。",
    icon: "info"
})

基本的なカタチはこんな感じ。

カスタマイズ

ややこしいのですが、Vue SwalはSweetAlert2をもとにVueで作り変えられているようです。
「じゃあSweetAlert2の公式ドキュメント見ればいいの？」と思われるかもしれませんが、残念ながら違います。
だいたいは対応していますが、ちょこちょこVue Swalには搭載されていないオプションがあります。
preConfirmとか。
完全に別物ではないが、同じでもないという……。ややこしや、ややこしや。

なので、私がよく使うオプションをちょこっと紹介します。

アイコンの変更

ここはみんないじる可能性があります。
Vue Swalって普通に実装するとすっごいシンプルなのですが、
iconオプションを足すだけで本当はさまざまなアイコンを表示できます。

初期表示の場合

iconオプションをつけなかった場合。

methods: {
  alert(){
    this.$swal('Hello word!');
  }
}

アイコンをつけた場合

methods: {
  aletInfo(){
    this.$swal({
+     icon: 'info',
+     text: 'なにか情報を表示します。'
    })
  },
}

iconなど、なにか1つでもオプションを設定したら、
中に表示するテキストもオプションで設定することになります。

アイコンはinfoの他にも、以下のようなものがあります。

  • warning
  • error
  • success

入力欄を表示する

モーダルで入力欄を作成することができます。

methods: {
  alertWithInput(){
    this.$swal({
      icon: 'info',
      text: '名前を入力してください。',
+     content: 'input'
    })
  },
}

でも名前を入力させて閉じるだけ、なんてシチュエーションはないですよね。
名前の入力後、OKを押したあとに処理を動かすこともできます。

ボタンを押したあとに処理を動かす


methods: {
  alertWithInput(){
    this.$swal({
      icon: 'info',
      text: '名前を入力してください。',
      content: 'input'
    })
+   .then((submitName) => {
+     this.$swal({
+       icon: 'success',
+       text: `あなたの名前は${submitName}ですね。`
+     })
+   })
  },
}

Promiseのthen/catchが書けちゃいます。
また、引数を取ることができるので、入力欄を設けた場合は入力内容を処理の中で使えます。

ボタンを追加する

いつもOKなわけじゃない。
ときにはキャンセルもしたいはず。

ボタンを追加しましょう。

methods: {
  alertWithCancelButton(){
    this.$swal({
      icon: 'info',
      text: 'ボタンを追加しました。',
+     buttons: true
    })
  },
}

buttonsをtrueにするだけ。キャンセルボタンが追加されます。

押したボタンによって処理を分ける


OKを押した場合

キャンセルを押した場合

methods: {
  alertWithCancelButton(){
    this.$swal({
      icon: 'info',
      text: '押したボタンによって処理を分ける',
      buttons: true
    })
+   .then((isOkButton) => {
+     if (isOkButton) {
+       this.$swal({
+         icon: 'success',
+         text: 'OKボタンが押されました。'
+       })
+     } else {
+       this.$swal({
+         icon: 'error',
+         text: 'キャンセルボタンが押されました。'
+       })
+     }
+    })
  },
}

入力欄を設けた場合は、引数には入力内容が入りました。
しかし、入力欄を設けなかった場合は押したボタンの内容が引数に入ります。
今回の場合ではOKを押したらtrue、キャンセルを押したらfalseが引数に入ります。

その他

前述の通り、SweetAlert2のドキュメントがそのまま使えるわけではないですが、
説明文にHTMLを入れられたり、タイトルを設定したり、
本家SweetAlert2と同様にかなり拡張性が高いVue Swal。

何より、モーダルらしいモーダルのデザインがデフォルトで適用されているのが良いですね。
ぜひお試しください！

公式

本家と比べるとスター数が少なく、更新も頻繁ではないのでちょっと心配ではある。
https://github.com/anteriovieira/vue-swal?ref=kabanoki.net

Discussion