原生js封装的弹框插件

原生javascript 弹框 插件

介于旧版本的弹框插件不是很好用，
所以，笔者在vue框架里面上传了另一版的弹框插件
新版本弹框亮点：
1、完全基于原生js，可以移植到其他框架语言项目（前提是支持es6，或者能够编译降级）
2、引用限制：老版本弹框，由于插入节点的性质，因此一次只能打开一个弹框。新版本弹框只会在调用时才会插入相应节点，且无打开弹框数目限制，更符合项目实际需求
3、视觉层面：新版本弹框做了适度的过渡效果，不至于太生硬
4、性能层面：老版本弹框大量使用了定时器，新版本弹框只在必要时引入，但新版本是直接操作节点的，因此性能消耗大致相当（脑补）
5、代码层面：新版本弹框使用较多es6语法，且代码书写较老版本稍微规范，更容易阅读、维护和改写
6、新版本弹框支持更多的弹框选择（新增success、error、progress）
7、支持的方法：新版本open方法更加稳定，支持打开各类弹框；close方法也更加稳定；支持changeMsg方法改变弹框显示的信息

补充：
1、由于自身限制，弹框插件可能存在诸多槽点，各位在使用的时候欢迎指出
框架github仓库地址
新版弹框相对目录：src/components/dialog/

一、 各类弹窗的调用

1.1、加载对话框

调用：
方法一： this.$dialog.loading(msg,clickClose,callback)
方法二： this.$dialog.open({
            type: 'loading',
            msg: '',
            clickClose: true,
            callback: function(){}
         })

1.2、警告对话框

调用：
方法一： this.$dialog.alert(msg,ensure)
方法二： this.$dialog.open({
            type: 'alert',
            msg: '',
            ensure: function(){}
         })

1.3、确认对话框

调用：
方法一： this.$dialog.confirm(msg,ensure,cancel)
方法二： this.$dialog.open({
            type: 'confirm',
            msg: '',
            ensure: function(){},
            cancel: function(){}
         })

1.4、输入对话框

调用：
方法一： this.$dialog.prompt(msg,value,ensure,cancel)
方法二： this.$dialog.open({
            type: 'prompt',
            msg: '',
            value: '',
            ensure: function(){},
            cancel: function(){}
         })

1.5、普通信息对话框

调用：
方法一： this.$dialog.msg(msg,timeout,callback)
方法二： this.$dialog.open({
            type: 'msg',
            msg: '',
            timeout: 3,
            callback: function(){}
         })

1.6、成功信息对话框

调用：
方法一： this.$dialog.success(msg,timeout,callback)
方法二： this.$dialog.open({
            type: 'success',
            msg: '',
            timeout: 3,
            callback: function(){}
         })

1.7、失败信息对话框

调用：
方法一： this.$dialog.error(msg,timeout,callback)
方法二： this.$dialog.open({
            type: 'error',
            msg: '',
            timeout: 3,
            callback: function(){}
         })

1.8、进度条对话框

调用：
方法一： this.$dialog.progress(current,total,clickClose,callback)
方法二： this.$dialog.open({
            type: 'progress',
            current: '10M',
            total: '123M',
            clickClose: false,
            callback: function(){}
         })

二、其他方法

2.1 关闭指定弹框

调用：this.$dialog.close(id)
每个弹框在生成的时候都附有指定的id
例：let id = this.$dialog.loading('loading...') this.$dialog.close(id)

2.2 关闭所有弹框

调用： this.$dialog.closeAll()

2.3 更改指定弹框的文本信息

调用： this.$dialog.changeMsg(id,msg)
id: 指定对话框id； msg： 要替换成的信息

2.4 更改指定进度框信息

调用： this.$dialog.changeProgress(id,current,total)
id: 指定对话框id； current： 当前完成量； total： 总任务量