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 を応援していただければ幸いです。

以下もご興味があるかもしれません: