使用 javascript 全局设置 toastr 选项答案

【问题标题】：set toastr options globally using javascript使用 javascript 全局设置 toastr 选项
【发布时间】：2019-09-10 09:18:15
【问题描述】：

我有一组全部使用 toastr 的脚本。它们看起来有点像这样：

import $ from 'jquery';
import toastr from 'toastr';
import list from './data/address';
import { selectedApp, validate, getCookie, setCookie } from './common';

$(document).ready(function () {
    toastr.options = {
        'closeButton': true,
        'debug': true,
        'newestOnTop': false,
        'progressBar': true,
        'positionClass': 'toast-top-full-width',
        'preventDuplicates': false,
        'onclick': null,
        'showDuration': '6000',
        'hideDuration': '1000',
        'timeOut': '50000',
        'extendedTimeOut': '1000',
        'showEasing': 'swing',
        'hideEasing': 'linear',
        'showMethod': 'fadeIn',
        'hideMethod': 'fadeOut'
    };

    // ---  Application code --- //
});

我有几个脚本，它们都在顶部声明了toastr.options。有没有一种方法（可能使用导入）可以让我在全局范围内设置 toastr 选项？

【问题讨论】：

您可以在单独的js中使用export default并导入它或使用window对象来全局设置这个对象。
你能给我举个例子吗？

标签： javascript toastr

【解决方案1】：

如果你想使用 es6 模块，那么你可以创建一个单独的 toastr 配置。例如，

import toastr from "toastr";

toastr.options = {
  closeButton: true,
  debug: true,
  newestOnTop: false,
  progressBar: true,
  positionClass: "toast-top-full-width",
  preventDuplicates: false,
  onclick: null,
  showDuration: "6000",
  hideDuration: "1000",
  timeOut: "50000",
  extendedTimeOut: "1000",
  showEasing: "swing",
  hideEasing: "linear",
  showMethod: "fadeIn",
  hideMethod: "fadeOut"
};

export default toastr;

然后只需在顶部导入此文件而不是 toastr，因为这会配置 toastr 并导出配置的 toastr。作为

import toastr from './PathToAboveFile';

或者如果你想要一个 es5 风格的全局配置使用，

window.toastrOptions = {...}

在单独的 js 文件中，并在每个 html 页面中引用。然后在$(document).ready函数中设置即可。

toastr.options = window.toastrOptions;

由于现在 toastr 选项位于单独的文件中，因此可以集中配置。

【讨论】：