0.0.6 • Published 6 years ago
@redbuck/toast v0.0.6
零依赖toast服务
DEMO
安装
npm i @redbuck/toast或者
yarn add @redbuck/toast
引入
html
<link rel="stylesheet" href="./lib/toast.css">
<script type="text/javascript" src="./lib/toast.js"></script>模块
import Toast from '@reabuck/toast'
import '@reabuck/toast/lib/toast.css'使用
一般用法
const toast = Toast(ToastOption);
// toast.d.ts
type ToastOption = string | managerTypemanagerType:
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| message | String | '' | 文字 |
| type | String | 'text' | 类型 |
| duration | Number | 2000 | 延时,0表示永不消失 |
| mask | Boolean | false | 是否有背景浮层 |
| mountTo | Function | () => body | 挂载点 |
| className | String | '' | 自定义根标签class |
toast: ToastManager实例.可通过实例方法clear清除自身
别名
Toast.success(option);
Toast.loading(option);
Toast.error(option); 别名即Toast({type: 'name'})的简写方式.
如Toast.success('message')等价于Toast({message: 'message', type: 'success'})
注,
loading默认duration为0,不关闭,需要指定时间或手动关闭
methods
- Toast.clearAll() 用于清除所有Toast
- Toast.clear(seed) 清除指定toast,seed即toast编号,根元素的id即为'toast'+seed