分别为每个 toast 类型设置 toastr.js 选项答案

【问题标题】：set toastr.js options for each toast type individually分别为每个 toast 类型设置 toastr.js 选项
【发布时间】：2017-08-25 08:39:40
【问题描述】：

是否可以为每种 toast 类型单独设置 toastr 选项？

我的烤面包机代码

toastr.options = {
  "closeButton": true,
  "debug": false,
  "newestOnTop": false,
  "progressBar": false,
  "positionClass": "toast-bottom-right",
  "preventDuplicates": false,
  "onclick": null,
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": "60000",
  "extendedTimeOut": "60000",
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut"
};

const infoMessage = $(".js-toast-message-info").html();
if (infoMessage && infoMessage.length > 0) {
  toastr.info(infoMessage);
}

const errorMessage = $(".js-toast-message-error").html();
if (errorMessage && errorMessage.length > 0) {
  toastr.error(errorMessage);
}

const warningMessage = $(".js-toast-message-warning").html();
if (warningMessage && warningMessage.length > 0) {
  toastr.warning(warningMessage);
}

const successMessage = $(".js-toast-message-success").html();
if (successMessage && successMessage.length > 0) {
  toastr.success(successMessage);
}

我已经尝试将我想要的不同选项类型放在特定 toastr 类型的 if 语句中，但没有结果。

有没有简单的方法来实现这一点？

【问题讨论】：

标签： jquery toastr

【解决方案1】：

您可以创建类，例如通知程序，允许您为特定消息类型定义不同的设置。

这是一个简单的解决方案：

toastr.options = {
  "closeButton": true,
  "debug": false,
  "newestOnTop": false,
  "progressBar": false,
  "positionClass": "toast-bottom-right",
  "preventDuplicates": false,
  "onclick": null,
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": "60000",
  "extendedTimeOut": "60000",
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut"
};


class Notifier {
    constructor(opt) {
    this.dflt = {
        info: {
        "closeButton": false
      },
      success: {
        "progressBar": true
      },
      warning: {

      },
      error: {

      }
    }
    this.cfg = _.defaults(opt, this.dflt);
  }

  info(msg, tl, cfgOvr) {
    this.notify('info', msg, tl, cfgOvr);
  }

  success(msg, tl, cfgOvr) {
    this.notify('success', msg, tl, cfgOvr);
  }

  warning(msg, tl, cfgOvr) {
    this.notify('warning', msg, tl, cfgOvr);
  }

  error(msg, tl, cfgOvr) {
    this.notify('error', msg, tl, cfgOvr);
  }

  notify(lvl, msg, tl, cfgOvr) {
    let cfg = this.cfg[lvl];
    if (cfgOvr) {
      cfg = _.defaults(cfgOvr, cfg);
    }
    toastr[lvl](msg, tl, cfg);
  }
}

const notifier = new Notifier();
notifier.info('a', 'b');

上面有什么好处，你可以设置你的默认值，在构造函数中覆盖它们，并额外覆盖特定的消息使用。

working JSFiddle

【讨论】：

似乎在你的小提琴上工作得很好，太棒了。但是在我的项目中，我收到错误“无法读取 undefined. Which refers to window.toastr[lvl](msg, tl, cfg); 的属性“信息”；还有不使用 lodash 的方法吗？（我会检查一下）
我使用 lodash 覆盖了默认设置 - 正如您所看到的，这样做非常简单方便。通常，您可以使用任何函数来验证覆盖的配置对象是否在默认值中定义了属性，如果没有，它会从默认对象中复制该属性。 jsfiddle.net/AgilePlayers/yk48h5cy/2 - 使用 jquery 扩展函数而不是 lodash 默认值的工作示例。
不客气。什么讯息？请尝试重现 jsfiddle 中的情况。没有代码很难说。
window.toastr[lvl](msg, tl, cfg); Uncaught TypeError: Cannot read property 'info' of undefined at eval (eval at notify (notifications.js:59), <anonymous>:1:15) at Notifier.notify (notifications.js:59) at Notifier.info (notifications.js:39) at Object.<anonymous> (
this.cfg[lvl] - 可能 this.cfg 未定义 - 但正如我所说 - 请将您的代码复制到 jsfiddle 并提供链接 - 这将是帮助您的最简单方法。用你的代码替换我的代码并更新。

【解决方案2】：

您可以像这样将配置选项作为第三个参数传递

toastr.warning('Please Allow Pop-ups for multiple selection','Popup Blocked',{
    "timeOut": 0,
    "extendedTimeOut": 0,
    "preventDuplicates": true,
    "disableTimeOut" : true,
});

这不会覆盖您的全局配置

【讨论】：