GmAlert官方文档

Appearance

快速入门 ​

我们提供了两种安装方法，对于新手我们推荐直接在浏览器引入，如果你只需要 GmAlert 中的某个功能，可以使用 npm 安装后在使用 esm 导入，这需要你有一定的前端编程知识

在线尝试 ​

我们准备了一个简单的 Demo 让你可以体验 GmAlert: StackBlitz.

安装 ​

你可以直接在浏览器端引入 iife 格式的文件，或者使用 es 来在你的项目中导入组件(支持 treeshake)

浏览器安装 ​

首先，我们需要在 Releases 下载编译好的gmalert.min.js 和gmalert.min.css文件, 你也可以下载gmalert-bundle.min.js, 这个文件使用css inject的方法，在 js 初始化的时候将样式注入 head

html
<head>
  <!-- inject to head -->
  <link rel="stylesheet" href="/assets/css/gmalert.min.css" />
</head>

<body>
  <!-- inject to body bottom -->
  <script src="/assets/js/gmalert.min.js"></script>
</body>
html
<body>
  <!-- inject to body bottom -->
  <script src="/assets/js/gmalert-bundle.min.js"></script>
</body>

npm 安装 ​

对于 npm 安装，我们提供了一个完善的 esm 格式的文件，它将 GmAlert 的 4 个组件进行了分别导出，对于样式文件也进行了分割， 这意味着你可以选择你希望在项目中引入的功能，从而减小代码量

sh
npm add gmalert

然后我们就可以在项目中轻松使用了，注意需要导入相应的 css

ts
import { alert, information, message, notice } from 'gmalert'

使用 ​

无论是使用什么安装方式，我们都提供了一致的 api 接口

Alert ​

代码
js
Gmal.alert('怎么了啊')

Gmal.alert('oops..', 'error', {
  showConfirm: true,
})

Gmal.alert({
  content: 'Hello',
  text: 'world',
  showConfirm: true,
  showCancel: true,
  onClosed(code) {
    if (code === 1) {
      Gmal.notice('你点击了确认')
    } else {
      Gmal.message('你点击了取消')
    }
  },
})

Message ​

代码
js
Gmal.message('怎么了啊')
Gmal.message('oops..', 'error')

Notice ​

代码
js
Gmal.notice('成功解决难题')
Gmal.notice('警告你一次', 'warn')
const load = Gmal.notice('等一下，快出来了', 'loading', {
  onClosed() {
    Gmal.message('啊，舒服了')
  }
})
setTimeout(() => {
  load.close()
}, 4000)

Infomation ​

代码
js
Gmal.information('怎么了啊', 5000)
Gmal.information('infomation', 'info')

TIP

更多使用方法，请查看进阶章节