Vue-SweetAlert2を使用したVue.jsのシンプルなモーダル通知

投稿日: 2022-04-20 2022-10-07
タグ: Vue.js

Windowオブジェクトでアプリの通知とアラートに使用できるalert（）メソッドは、ほとんどの状況で実際には理想的ではありません。一つには、それは醜く、カスタマイズする方法がありません。ありがたいことに、 SweetAlert 2 （SweetAlertの後継）と呼ばれる人気のあるライブラリは、応答性が高く、カスタマイズ可能で、アクセスしやすい優れた代替ライブラリを提供します。

vue-sweetalert2 は、SweetAlert 2のラッパーであり、Vueアプリに機能を簡単に統合できます。

ここでは、基本的なセットアップと使用法について説明します。

インストール

npmまたはYarnを使用してVue.jsプロジェクトにvue-sweetalertをインストールします。

# npm
$ npm install vue-sweetalert2

# Yarn
$ yarn add vue-sweetalert2

使用法

パッケージをインストールしたら、VueSweetalert2コンポーネントをに追加するだけです。 main.js ファイル：

main.js

import Vue from 'vue'
import VueSweetalert2 from 'vue-sweetalert2';
import App from './App.vue';

Vue.use(VueSweetalert2);

new Vue({
  el: '#app',
  render: h => h(App)
});

これで、メインアプリで、 $swal関数を使用してVue-Sweetalert2のすべてのメソッドにアクセスできます。

app.vue

<template>
  <!-- button used to trigger event -->
  <button v-on:click="alertDisplay">Click me</button>
</template>

<script>
  export default {
    data() {
      return {
        text: ''
      }
    },
    methods: {
      alertDisplay() {
        // $swal function calls SweetAlert into the application with the specified configuration.
        this.$swal('Heading', 'this is a Heading', 'OK');
      }
    }
  }
<script>

詳細な例

SweetAlert 2には、このセクションで説明する他の組み込みメソッドが付属しています。その他の例については、APIドキュメントを参照することもできます。

入力データの受け渡し

ユーザー入力を受け入れることができるモーダル/ポップアップが必要な場合は、 $swalに渡される構成でinputキーを使用するだけです。

<template>
  <button v-on:click="alertDisplay">Click Me!</button>
</template>

<script>
  export default {
    data() {
      return {}
    },
    methods: {
        alertDisplay() {
          // Adding an input method from SweetAlert 2 automatically binds an input form.
        this.$swal({
          title: 'What is your Name?',
          input: 'text',
          inputPlaceholder: 'Enter your name here',
          showCloseButton: true,
        });
      }
    }
  }
</script>

カスタムHTMLの定義

モーダルの一部として独自のマークアップを追加することもできます。構成でhtmlキーを使用するだけです。

<template>
  <button v-on:click="alertDisplay">Click Me!</button>
</template>

<script>
  export default {
    data() {
      return {}
    },
    methods: {
      alertDisplay() {
        this.$swal({
              title: '<i>Custom HTML</i>',
          // add a custom html tags by defining a html method.
          html:
            'This is an <em> emaphazied text </em>, ' +
            '<a href="#">links</a> ' +
            '<strong>And other tags</strong>',
          showCloseButton: true,
          showCancelButton: true,
          focusConfirm: false,
        })
      }
    }
  }
</script>

PromiseベースのAPI

SweetAlert 2は、Promiseを使用して、ユーザーが通知をどのように操作したかを追跡します。次の例では、promiseがtrue値で解決された場合は成功プロンプトを表示し、それ以外の場合は代替メッセージを表示する別のアラートプロンプトを表示します。

<template>
  <button v-on:click="alertDisplay">Click Me!</button>
</template>

<script>
  export default {
    data() {
      return {}
    },
    methods: {
      alertDisplay() {
        this.$swal({
          title: 'Are you sure?',
          text: 'You can\'t revert your action',
          type: 'warning',
          showCancelButton: true,
          confirmButtonText: 'Yes Delete it!',
          cancelButtonText: 'No, Keep it!',
          showCloseButton: true,
          showLoaderOnConfirm: true
        }).then((result) => {
          if(result.value) {
            this.$swal('Deleted', 'You successfully deleted this file', 'success')
          } else {
            this.$swal('Cancelled', 'Your file is still intact', 'info')
          }
        })
      }
    }
  }
</script>

どうぞ！ 🚀それは本当に速くて簡単でした-十分でしょ？数行のコードで、アプリにシンプルで簡単なアラートと通知を作成できるようになりました。

getdocs

13036