noty.js

Star

noty.js 可以进行深度定制，但同时提供默认定制，开箱即用。下文对默认定制做简单介绍。关于定制，请参考这个链接。

安装

通过 npm

$ npm install @ppzp/noty

引入

import noty from '@ppzp/noty' // 引入默认配置（动画、内容）的通知
import '@ppzp/noty/content/index.css' // 引入默认样式

或者，通过 CDN

<link rel="stylesheet" href="https://unpkg.com/@ppzp/noty.js/content/index.css">
<script src="https://unpkg.com/@ppzp/noty.js/global.js" type="module"></script>

通过 CDN 的方式引入后，你可以通过 window.noty 使用 Noty.js 的默认配置

案例

基础

noty.info('一条普通通知')
noty.success('成了~')
noty.warn('警告！')
noty.error('出错了')
noty.loading('加载中...') // 默认情况下不会自动关闭

设置停留时间

noty.info('停留 1 秒', {
  duration: 1000
})

常驻

noty.info('我将永存', {
  duration: 0
})

关闭按钮

从 v0.0.5 开始，所有通知默认都有关闭按钮，但需要鼠标放到通知框里才显示。如果需要一直显示，可以：

noty.info('注意右上', {
  closeBtn: true
})

实践一异常提示

发生异常时，为了不使用户忽略通知，应使通知常驻，并提供关闭按钮，让用户手动关闭通知。

noty.error('出错了', {
  duration: 0,
  closeBtn: true
})

实践二数据加载

数据加载前应通知用户，进入“等待期”；数据加载完成后，再关闭通知，同时提示“加载成功”。

const notyItem = noty.loading('数据加载中') // 加载数据前，显示通知
ajax.get('/xxx').then(function(res) {
  // 处理数据...
  notyItem.close() // 数据加载完成后，关闭通知
  noty.success('数据加载成功')
})

实践三 webpack

webpack 最简实践

定制

API & 定制

安装