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は終了状態で起動します

推薦する

クリックして展開し、全文を読む機能を実現する純粋なCSS

注記記事表示リストインターフェースを開発する場合、情報の基本的な概要を提供するために記事ヘッダーコン...

mysqld_multi を使用して単一のマシンに複数のインスタンスをデプロイする方法に関する MySQL チュートリアル

目次1. MySQLのコンパイルとインストール: 2. 最初のマルチインスタンス3307を準備する3...

MySQL 5.6 での table_open_cache パラメータの最適化と適切な構成の詳細な説明

1. はじめにtable_cache は非常に重要な MySQL パフォーマンス パラメータであり、...

CSSの記述形式、モバイルページの基本構造の詳細な説明

1. CSSの記述形式1. インラインスタイルCSSコードを開始タグに直接記述することができます&l...

Docker ファイルの保存パス、コンテナの起動コマンド操作の取得

コンテナはすでに作成されていますが、その起動パラメータ(データがマウントされる場所)を知る方法 #コ...

MySQLで日付を比較する方法の詳細な説明

データ型が datetime であるフィールド add_time を持つテーブル product が...

Harborを使用してプライベートDockerリポジトリを構築する方法

目次1. オープンソースの倉庫管理ツール Harbor 2 インストール2.1 DockerとDoc...

MySQL InnoDB のトランザクション特性を確保するにはどうすればよいですか?

序文「データベース トランザクションの特徴は何ですか?」と尋ねられたら、 ACID 特性である原子性...

ローカルアイデアアクティベーションサーバーの構築に関する詳細なチュートリアル

序文ブロガーはアイデアIDEを使用しています。アイデア公式が最近サードパーティのアクティベーションサ...

VMware vSphere6.0 サーバー仮想化の展開とインストールの図 (詳細な手順)

1. VMware vSphere 導入の早期計画のポイント1. vSphereの利点(わずかに)...

ウェブデザイナーのための超便利なツール 50 選

ウェブデザイナーになるのは簡単ではありません。デザインやアーキテクチャを考慮するだけでなく、さまざま...

ウェブデザインにおけるテキスト入力ボックスのパラメータの説明

<br />一般的なゲストブック、フォーラムなどでは、テキスト入力ボックスが使われていま...

HTMLの水平線注釈とコードコメントの使い方をマスターするだけです

水平線<hr /> タグを使用して、現在の位置に水平の分割線を描画します。例: XML/...

Node.js パッケージ マネージャー npm の具体的な使用方法

目次目的npm init および package.json ファイルモジュールのインストールと管理モ...