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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: CSS でコンテンツが長すぎる問題を解決する方法の詳細な説明
MySQL交換パーティションの詳細な例序文exchange パーティションを紹介する前に、まず my...
この記事は Linux centos8 をベースにして、docker をインストールし、イメージをプ...
表では、右下の境界線の色を個別に定義したり、セルの左上の境界線の色を定義したりできます。これら 2 ...
コードをコピーコードは次のとおりです。 <!-- ブラウザがローカル キャッシュからページにア...
MySQL は、膨大なユーザーベースを持つ無料のリレーショナル データベースです。この記事では、My...
目次イベントループmiscroTask (マイクロタスク) UI レンダリング (重要なポイント)次...
目次1. ファイアウォールの現在の状態を確認する2. ファイアウォールサービスを開始する3. ファイ...
MySQL には、10 進数などの標準データ型だけでなく、float や double などの非標...
1. 疑似クラスを使用して境界線の半分を表示する <!DOCTYPE html> <...
序文プログラミング言語には通常、さまざまな隠されたトリックが含まれており、これらのトリックを上手に使...
目次1. 監視ポート関係の説明操作する2. 監視サービス関係の説明操作する3. テンプレートのインポ...
コアコード -- 以下では、MySQLでのソート列の実装を示します -- テストデータ CREATE...
目次メイクファイルMakefile の命名とルールMakefile の仕組みMakefile変数Ma...
1. システムに必要な libaio ソフトウェアがインストールされていることを確認します。インスト...