引用
<link rel="stylesheet" type="text/css" href="./index.css">
<div id="slider"></div>
<script type="text/javascript" src="./index.js"></script>
<script type="text/javascript">
var toaster = new Toaster()
toaster.info({
text: 'default config'
})
</script>
例子
toaster.error({
text: 'There\'s something wrong',
textAlign: 'left',
withIcon: true,
closable: true,
animation: true,
duration: 2500,
onClick: function () {
// do sth
},
onAppear: function () {
// do sth
},
onVanish: function () {
// do sth
}
})
方法
名称 | 注释 |
---|---|
wait | Wait 类型消息 |
info | Info 类型消息 |
success | Success 类型消息 |
warning | Warning 类型消息 |
error | Error 类型消息 |
配置项
名称 | 类型 | 约束 | 注释 |
---|---|---|---|
text | String | 必须 | 消息文本内容 |
textAlign | enum['center','left','right'] | 默认 'center' | 文本对齐方式 |
withIcon | boolean | 默认 false | 是否创建图标 |
closable | boolean | 默认 false | 是否创建关闭按钮 |
animation | boolean | 默认 false | 是否使用动画过渡 |
duration | Integer | 默认 2000 | 消息存在时长 |
名称 | 注释 |
---|---|
onClick | 当消息被点击时 |
onAppear | 当消息被创建时 |
onVanish | 当消息被销毁时 |
源码
代码说明
- css 部分预定义类样式,以便 js 创建带样式的节点
- 图标使用 dataURL 引入
- 由于 IE 9 - 不支持 animation 属性,因此没有过渡效果
- 当鼠标移到消息上,动画效果和存在时长累加暂停;当鼠标移出消息时,动画和计时恢复正常
源码和示例代码地址
原文发布时间为:2018年02月13日
原文作者:lonelydawn
本文来源:开源中国 如需转载请联系原作者