使用 JavaScript 全局设置 Toastr 选项

Question

我有一组都使用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选项？

Answer 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 = {...}

在每个 HTML 页面中的单独 JS 文件和引用中。然后在$(document).ready函数中您可以设置它。

toastr.options = window.toastrOptions;

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