「vue-swal」で美しいアラートを実装する

vue-swalとは

 

「vue-swal」は、美しいアラートを実装するライブラリです。

ダイアログのステータスやボタン、テキスト入力をサポートしています。
シンプルな実装ながら、CSSをカスタマイズすること無く綺麗なアラートを実装できます。

元々は「sweetalert」というライブラリです。
Githubでは、Starが20,000 を超える超超人気ライブラリです。

 

インストール

以下のnpm、yarn、CDNのどれか一つを使ってインストールします。

npm

npm install vue-swal

yarn

yarn add vue-swal

CDN

<script src="https://unpkg.com/vue-swal"></script>

 

gitリポジトリは以下から取得できます。

https://github.com/anteriovieira/vue-swal

 

導入手順

1. ライブラリの取り込み

webpack等の場合

import Vue from 'vue'
import VueSwal from 'vue-swal'
Vue.use(VueSwal)

WEBページの場合

取り込みの必要はありません。

2. methodsを準備

今回はalertというmethodsを準備します。
クリックイベントで呼び出されるようにします。

 new Vue({
   el: '#app',
   methods: {
    alert: function() {
      this.$swal('Hello word!')
    }
  }
 })

3. テンプレートを準備

<div id="app">
  <button @click="alert">alert!</button>
</div>

 

デモ

>>専用ページで確認する

 

アラートのステータス

「vue-swal」は4つのステータスをサポートしています。
warning error success info

例

this.$swal('TITLE', "You clicked the button!", 'success')

>>専用ページで確認する

 

アラートにpromisesを使う

「vue-swal」では、promisesを使うことで、ボタンクリック後の処理を設定することができます。

例

methods: {
    alert: function() {
      this.$swal({
       title: "最初のアラート",
       text: "ボタンによって反応が変わります",
       icon: "warning",
       buttons: true,
       dangerMode: true,
     })
     .then((willDelete) => {
       if (willDelete) {
         this.$swal("Okボタンが押されました。", {
           icon: "success",
         });
       } else {
         this.$swal("Cancelされました。");
       }
      });
    }
  }

>>専用ページで確認する

 

アラートでテキスト入力する

「vue-swal」では、アラートにテキスト入力を行う事ができます。

例

methods: {
    alert: function() {
      this.$swal(
        'テキストを入力', 
        {content: "input"}
      )
      .then((value) => {
        this.$swal(`入力値: ${value}`);
      });
    }
  }

>>専用ページで確認する

 

まとめ

「vue-swal」で美しいアラートを実装する方法でした。

サンプルを作る上で何ら苦労すること無く実装ができました。
流石は、Star 20,000超えライブラリ（二回目

おすすめです。
是非試してください。

今日はこの辺でー