Laravel+Vue中Toastr仅显示空白通知的问题求助

以下是针对你遇到的问题的具体排查和解决步骤：

1. 修复全局挂载的拼写错误 #

你在bootstrap.js里的全局挂载代码写错了单词：

// 错误写法
window.toastre = require('toastr');
// 正确写法
window.toastr = require('toastr');

多了一个字母e，虽然组件内用了import，但拼写错误可能导致全局实例异常，先修正这个问题。

2. 引入Toastr的CSS样式（核心问题） #

空白白色通知最常见的原因是未加载Toastr的样式文件，它依赖自带的CSS来渲染通知的颜色、图标和布局。你可以通过以下方式引入：

• 在项目主SCSS文件（比如resources/css/app.scss）中添加：

  @import '~toastr/build/toastr.min.css';
  

• 或者在bootstrap.js中直接导入CSS：

  window.toastr = require('toastr');
  require('toastr/build/toastr.min.css'); // 新增这行引入样式
  

3. 统一Toastr的引入方式 #

你在组件里同时做了import toastr from 'toastr'和全局挂载window.toastr，可能导致实例不一致。可以二选一：

• 删除组件内的import语句，直接使用全局的window.toastr.success(...)
• 保留组件内的import，删除bootstrap.js里的全局挂载代码

4. 调整路由跳转时机 #

你在调用toastr.success后立即执行router.push，页面跳转速度可能快于通知渲染，导致通知来不及显示完整。可以通过Toastr的回调函数确保通知显示完成后再跳转：

toastr.success('Berhasil menambah pegawai', '', {
    onHidden: function() {
        router.push({ name: 'pegawai.index' });
    }
});

5. 初始化基础配置（可选优化） #

添加基础配置可以让通知的显示行为更符合预期，比如在bootstrap.js里配置：

window.toastr = require('toastr');
require('toastr/build/toastr.min.css');

toastr.options = {
    closeButton: true,
    progressBar: true,
    positionClass: 'toast-top-right', // 指定通知显示位置
    timeOut: 3000, // 自动关闭时长
    preventDuplicates: true // 避免重复弹出相同通知
};

内容的提问来源于stack exchange，提问作者Bruh Brah