GmAlert 一个轻量的原生js消息组件

对于一个用户体验良好的网站来说，一个完善的Message消息组件是必不可少的，在开发Web应用时，我们经常需要向用户展示一些提示信息，比如操作成功、失败、警告等。这些信息通常是短暂的，会在一定时间后自动消失，不会影响用户的正常操作。为了实现这样的功能，我们可以使用Message消息组件，它是一种轻量化的、多功能的、可定制的UI组件，可以方便地在页面上显示各种类型的消息。

GmAlert 就是这样一个提供了强大功能的前端开源消息组件，而且非常轻量 (css+js only 18kb!) 。它提供了4个可拆解的核心模块（alert，message，notice，information），提供不同的样式与效果，同时也用作不同的用途。本站已经全站开启了GmAlert，你甚至可以在控制台通过 Gmal 对象来使用该功能

文档: https://gmeroalert.github.io

快速使用

如果你只是想以最快的速度使用该组件，可以直接去 Releases 下载 gmalert-bundle.min.js 在网站引入，然后就能轻松使用啦。GmAlert 提供了非常易用的 API 来帮助我们调用各个模块：

// 打开一个5s后自动关闭的弹出组件
Gmal.alert('OK', 5000)

// 打开一个mini的弹出提示组件(本站的代码复制就会调用该组件哦)
Gmal.message('复制成功')

// 打开一个info类型的右上角的Notice
Gmal.notice('哈哈哈', 'info')

// 一个简单的右下角的information
Gmal.information('这是一条公告', 4000)

你可能也会希望有一些高级操作

// 一个简单的加载提示
const load = Gmal.notice('别着急正在加载呢', 'loading')
doSomeWork().then(()=>{
    Gmal.message('操作成功')
}).catch((e)=>{
    Gmal.message('发生错误！！'+e)
}).finally(()=>{
    load.close()
})

// 获取用户输入内容
const $input = document.createElement('input')
const handleInput = () => {
    const value = $input.value.trim()
    if (value) message("你输入了 "+value)
    else message("你没有输入任何内容")
}
const inputAlert = () => {
    alert('OK', {
        html: $input,
        showConfirm: true,
        showCancel: true,
        onClosed(code){
            if (code === 1) {
                handleInput()
            } else {
                message('你点击了取消')
            }
        },
    })
}

当然更多高级操作还是要去看官方文档

总结

GmAlert 是一个很轻量的前端消息组件，而且它还支持按需引入，进一步减小体积，同时提供了很多个性化的途径，非常推荐大家使用