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

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

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

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

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

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

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

/**
     * [削除]をクリックします
     */
    削除(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)
            スワルファイア(
                「正常に削除されました!」
                '正常に削除されました! '、
                '成功'
            ）
          }
        })
      })

 /**
     * [保存]をクリックします
     */
    保存（） {
      _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)
        }
      })
    }