[Vue] 跟着 Vue 闯荡前端世界

透过 toastr 统一消息输出方式

让系统消息显示具有美观及一致性的呈现


前言


toastr 是提供一种非阻断式的消息呈现方式,在消息呈现的时候不会阻挡用户操作行为,并且可以依需求选择消息呈现的方式、时间与关闭方式,是一种不错的消息呈现方式,以下介绍。

安装


此套件的运行相依于 jQuery,因此需要先安装 jQuery 后再透过以下语法安装 toastr 套件。

$ npm install --save toastr

Import toastr 模块


为了让 main.js 比较干净,因此笔者建立 setup 数据夹来放置其他需要设定引用的相关 js 档。

首先于 setup 数据夹中建立 toastrSetup.js 文件如下,主要就是引用 toastr 及其 scss 文件,并且对 toastr 做一些全域设定。

// 其中 import 'toastr/toastr.scss' 
// 可透过 module resolve 至 node_modules 数据夹找寻对应模块
// 因此与自行透过相对路径引用模块的作用相同
// import '../../node_modules/toastr/toastr.scss'

// [webpack.base.conf.js]
//  modules: [
//       resolve('src'),
//       resolve('node_modules')  // 
//     ],

import toastr from 'toastr'
import 'toastr/toastr.scss'

export default function () {

    // global toastr setting
    toastr.options.closeButton = true
    toastr.options.timeOut = 3000
    toastr.options.progressBar = true

}

最后在 main.js 引用并执行该 function 即可。

本地使用 (manually import)


使用前可以先透过 import toastr 后,直接调用。








画面如下,点选 show Toastr 后交互正常,可显示欲输出资讯让用户了解。

全域使用 (automatically import )


如果这个 module 有机会被许多组件(component) 使用,此时若需要不断的在四处 import toastr 模块好像有点累;这时就可以考虑在 webpack 中设定自动 import modules,设定方式如同前篇文章设定 jQuery 方式一样,请开启 webpack.base.conf.js 参考以下设定。

// ...
var webpack = require('webpack')

module.exports = {
    // ...
    plugins: [
        new webpack.ProvidePlugin({
            // Automatically loads modules
            toastr: 'toastr'
        })
    ]
}
如果异动了这项设定,需要重新执行$ npm run dev 才会生效喔!

设定后就不需要在每个地方都 import toastr 模块,可以直接使用了。

最后如果有使用 ESLint 的朋友会发现一直报错,那是因为 ESLint 根本不知道 toastr 是什么,所以会发出错误消息,因此可以在 .eslintrc.js 中加入 globals 变量即可避免此问题发生。

参考资讯


toastr - GitHub

测试代码已上传 GitHub 中,有需要的朋友可以参考一下。
若有更好的建议或做法再请不吝指导一下啰! 感谢!


希望此篇文章可以帮助到需要的人

若内容有误或有其他建议请不吝留言给笔者喔 !