如何解决SweetAlert2的‘Unknown parameter "onOpen"’警告？

原因分析 #

出现这个警告通常有两个原因：

• 版本迭代变更：SweetAlert2 v11及以上版本把原onOpen生命周期回调重命名为didOpen，再用onOpen就会被判定为无效参数。
• 配置位置错误：哪怕是旧版本，onOpen这类回调也不能直接放在Swal.mixin()的配置里，必须在调用fire()时传入。

解决方案 #

适配v11+新版本 #

如果你的SweetAlert2是v11或更高版本，按以下代码修改：

import Swal from "sweetalert2";

const ToastComponent = Swal.mixin({
  toast: true,
  position: "top-end",
  showConfirmButton: false,
  timer: 3000,
  timerProgressBar: true,
});

export const Alert = (type = "", title = "", description = "") =>
  Swal.fire(title, description, type);

export const Toast = (type = "", title = "") =>
  ToastComponent.fire({
    icon: type,
    title,
    didOpen: (toast) => {
      toast.addEventListener("mouseenter", Swal.stopTimer);
      toast.addEventListener("mouseleave", Swal.resumeTimer);
    },
  });

核心改动：移除mixin里的onOpen，在fire()调用中改用didOpen。

适配v10及以下旧版本 #

如果用的是v10或更早版本，只需把onOpen从mixin移到fire()的配置中：

import Swal from "sweetalert2";

const ToastComponent = Swal.mixin({
  toast: true,
  position: "top-end",
  showConfirmButton: false,
  timer: 3000,
  timerProgressBar: true,
});

export const Alert = (type = "", title = "", description = "") =>
  Swal.fire(title, description, type);

export const Toast = (type = "", title = "") =>
  ToastComponent.fire({
    icon: type,
    title,
    onOpen: (toast) => {
      toast.addEventListener("mouseenter", Swal.stopTimer);
      toast.addEventListener("mouseleave", Swal.resumeTimer);
    },
  });

补充说明 #

Swal.mixin()是用来复用弹窗基础配置（比如位置、定时、按钮显示状态）的，而生命周期回调属于单次弹窗的行为逻辑，按照SweetAlert2的设计，这类逻辑需要在每次触发弹窗时单独传入，不能混入基础配置里。

内容的提问来源于stack exchange，提问作者Dawood Ahmad