Vueがsweetalert2プロンプトコンポーネントを統合する際の問題についてお話ししましょう

Vueがsweetalert2プロンプトコンポーネントを統合する際の問題についてお話ししましょう

ここに画像の説明を挿入
ここに画像の説明を挿入

1. プロジェクト統合

公式ウェブサイトリンク: https://sweetalert2.github.io

ここに画像の説明を挿入

場合

ここに画像の説明を挿入
ここに画像の説明を挿入

1. CDNインポート方法:

index.html にグローバルにインポート

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script> 

ここに画像の説明を挿入

位置:

ここに画像の説明を挿入

npmのインストール方法:

npm をインストールします。

2. 箱の梱包を確認する

確認 = {
    表示: 関数 (メッセージ、コールバック) {
        スワルファイア({
            タイトル: 「確認しますか?」
            テキスト: メッセージ、
            アイコン: '警告'、
            キャンセルボタンを表示: true、
            確認ボタンの色: '#3085d6',
            キャンセルボタンカラー: '#d33',
            confirmButtonText: 「はい、確認しました!」
        }).then((結果) => {
            結果が確認された場合
                if (コールバック) {
                    折り返し電話()
                }
            }
        })
    }
}

3. 迅速な箱詰め

トースト = {
    成功: 関数 (メッセージ) {
        スワルファイア({
            ポジション: 「トップエンド」、
            アイコン: '成功'、
            タイトル: メッセージ、
            確認ボタンを表示: false、
            タイマー: 3000
        })
    },

    エラー: 関数 (メッセージ) {
        スワルファイア({
            ポジション: 「トップエンド」、
            アイコン: 'エラー'、
            タイトル: メッセージ、
            確認ボタンを表示: false、
            タイマー: 3000
        })
    },

    警告: 関数 (メッセージ) {
        スワルファイア({
            ポジション: 「トップエンド」、
            アイコン: '警告'、
            タイトル: メッセージ、
            確認ボタンを表示: false、
            タイマー: 3000
        })
    }
};

4. 確認ボックスの使用

/**
     * [削除]をクリックします
     */
    削除(id) {
      _this = this とします
      Confirm.show("削除されたデータは復元できません。削除を確認してください!", function () {
        読み込み中.show()
        _this.$api.delete('http://127.0.0.1:9000/business/admin/chapter/delete/' + id).then((res) => {
          読み込み中.hide()
          console.log("章リストの削除結果:", res)
          resp = res.data とします
          if (resp.success) {
            _this.リスト(1)
            スワルファイア(
                「正常に削除されました!」
                '正常に削除されました! '、
                '成功'
            )
          }
        })
      })

5. メッセージプロンプトボックスの使用

 /**
     * [保存]をクリックします
     */
    保存() {
      _this = this とします
      読み込み中.show()
      _this.$api.post('http://127.0.0.1:9000/business/admin/chapter/save', _this.chapter).then((res) => {
        読み込み中.hide()
        console.log("チャプターリストの結果を保存:", res)
        resp = res.data とします
        if (resp.success) {
          $("#form-modal").modal("非表示")
          _this.リスト(1)
          Toast.success("保存に成功しました!")
        } それ以外 {
          Toast.warning(resp.message)
        }
      })
    }

6. プロジェクトの効果

ここに画像の説明を挿入
ここに画像の説明を挿入

これで、vue 統合 sweetalert2 プロンプト コンポーネントに関するこの記事は終了です。vue 統合 sweetalert2 に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueカスタム着信音リマインダーコンポーネントの実装
  • Vueメッセージプロンプトグローバルコンポーネントを使用する最も簡単な方法
  • Vue カスタム プロンプト ボックス (Toast) コンポーネント実装コード
  • 一般的なヒントの使用や vue-cli プロジェクトでのコンポーネントの読み込みの詳細な例
  • Vue のグローバル プロンプト ボックス コンポーネント インスタンス コード
  • Vue.extend を使用してメッセージ プロンプト コンポーネントを構築する例
  • Vue.jsは美しく、柔軟で再利用可能なプロンプトコンポーネントの例を実装します
  • vue.js のプロンプトコンポーネント
  • SVGを使用してVueのグローバルメッセージプロンプトコンポーネントをカプセル化する

<<:  CSS でコンテンツが長すぎる問題を解決する方法の詳細な説明

>>:  Dockerは終了状態で起動します

推薦する

MySQL交換パーティションの詳細な例

MySQL交換パーティションの詳細な例序文exchange パーティションを紹介する前に、まず my...

DockerにJava環境をインストールするための実装手順

この記事は Linux centos8 をベースにして、docker をインストールし、イメージをプ...

HTML テーブル マークアップ チュートリアル (6): 暗い境界線の色属性 BORDERCOLORDARK

表では、右下の境界線の色を個別に定義したり、セルの左上の境界線の色を定義したりできます。これら 2 ...

メタを使用してトラフィックキャッシュをキャンセルし、ページにアクセスするたびにページを更新して簡単にデバッグできるようにします。

コードをコピーコードは次のとおりです。 <!-- ブラウザがローカル キャッシュからページにア...

MySQL の日付関数と日付変換およびフォーマット関数

MySQL は、膨大なユーザーベースを持つ無料のリレーショナル データベースです。この記事では、My...

...

Vue nextTickの原理の分析

目次イベントループmiscroTask (マイクロタスク) UI レンダリング (重要なポイント)次...

CentOS7 ファイアウォールとポート関連コマンドの紹介

目次1. ファイアウォールの現在の状態を確認する2. ファイアウォールサービスを開始する3. ファイ...

MySQL における Decimal 型と Float Double 型の違い (詳細説明)

MySQL には、10 進数などの標準データ型だけでなく、float や double などの非標...

CSS 境界線の半分または部分的に表示される実装コード

1. 疑似クラスを使用して境界線の半分を表示する <!DOCTYPE html> <...

珍しいけれど役に立つJSテクニックをいくつか紹介します

序文プログラミング言語には通常、さまざまな隠されたトリックが含まれており、これらのトリックを上手に使...

Zabbixのカスタム監視項目とトリガーについて

目次1. 監視ポート関係の説明操作する2. 監視サービス関係の説明操作する3. テンプレートのインポ...

MySQLは変数を使用してさまざまなソートを実装します

コアコード -- 以下では、MySQLでのソート列の実装を示します -- テストデータ CREATE...

Linux での Makefile の書き方と使い方の詳細な説明

目次メイクファイルMakefile の命名とルールMakefile の仕組みMakefile変数Ma...

Linux にバイナリ MySQL をインストールして MySQL パスワードをクラックする方法

1. システムに必要な libaio ソフトウェアがインストールされていることを確認します。インスト...