iYiuMessage 消息提示组件

199 阅读1分钟

自己写了一个简单的消息提示组件,我管他叫iYiuMessage。

先给一个Github地址:github.com/JensenYao/i… 喜欢的给个star

初版写出来有一段时间了,一直没有时间去整理发布博客,今天来给大家介绍一下iYiuMessage。

初版

iYiuMessage 简单的运用 prototype 来完成的第一版。

它现在可以自定义 Message 信息,也可以自定义 loading 信息和提示图标的样式。

下面说一下它使用的方法:

引入和创建iYiuMessage实例

<script src="./js/iYiu.js" type="text/javascript"></script>
<script type="text/javascript">
    //创建iYiuMessage实例
    var iYiuMessage = new iYiu();
</script>

Message消息提示:

iYiuMessage.message('我是错误信息,但是我不告诉你哪里错了!')

效果:

Loading加载提示(一):

iYiuMessage.inload();//加载
iYiuMessage.outload(6000);//结束加载

效果:

Loading加载提示(二):

iYiuMessage.inload({
    icon:'./image/oval.svg'
});//加载
iYiuMessage.outload(6000);//结束加载

效果:

Loading加载提示(三):

iYiuMessage.inload({
    icon:'./image/oval.svg',
    message:'加载中'
});//加载
iYiuMessage.outload(6000);//结束加载

效果:

createBox加载提示:

iYiuMessage.createBox({
    title:'删除',
    message:'你请定要删除该组件吗?'
},function(res){
    iYiuMessage.inload('我点的是确认');
},function(err){
    iYiuMessage.message('我点的是取消');
})

效果:

询问模态框暂时存在一些小的BUG,博主会尽快改好的!

虽然自己都感觉很low ,但是我相信我会把它做好的!