### 欢迎使用 Dialogx
`害，2020年，因为一直蝙蝠🦇的影响，只能一本正经的打开项目翘起来，遇到老铁方要分离弹窗库到斯蒂恩，发现正在使用的vue弹窗还没发分离，还必须依赖vue去运行，决定独立封包，就一本正经的抄起来，怎么快，怎么来。抄着抄着，要是手头的react那个项目要用呢，只能继续抄，继续改，废话多了.... 【有时项目为了加入弹层的交互模式，就要引入那些比较大的UI框架，虽说有些可以按需加载，但还是觉得重，不够轻量；】`
## Links(文档)
documentation（官方文档）
##### Dialogx说明
`**dialogx是一种轻量级的, 不依赖任何第三方框架，以「ios7」为基础的弹窗**`
##### 使用 dialogx
`1.多样化弹窗类型(Alert, Confirm, Prompt, Img, Pin, Action, Load, loading)`
`2.支持并基于Promise的调用和获取`
`3.相对优雅的异步关闭`
`4.支持渲染html`
`5.经典的iOS设计风格[浅色or深色:完善中...]`
`6.支持以Vue, React...等的小型项目以及非工程化的项目的导入`
`7.支持script标签引入[dialogx.window.js]`
##### 其他说明
`Prompt目前默认仅支持单个文件框的输入，支持类似element-ui 中的form组件所使用的验证方式`
##### 安装命令：
```
npm i dialogx --save 或者 yarn add dialogx
```
e.g
```
import dialogx from 'dialox';
import 'dialogx/example/index.css';//默认主题【浅色】
//import 'dialogx/example/dark.css';//暗黑主题【深色】
Vue.prototype.$dialogx = dialogx;
```
##### Alert
`使用方式：dialogx.Alert `
`参数：string | object`
```
//参数对象说明
var opt = {
title:"温馨提示",//修改标题头文案
msg:"是否更新？",//弹窗文本文案
html:"是否更新？",//html内容; 当html有效值传入，msg文案会被html替代，失效
okText:'确定',//确定按钮文案
wait:(next) => {//确定按钮异步处理关闭函数
//默认一个next参数
next();//调用关闭
}
}
//支持单个字符串传参
dialogx.Alert("666");
//支持对象传参
dialogx.Alert({ msg:"666" })
//支持异步关闭
dialogx.Alert({
msg:'支持异步关闭, 2秒后关闭',
wait:(next) => {
setTimeout(() => {
next()//调用关闭
}, 2000)
}
})
```
##### Confirm
`使用方式：dialogx.Confirm `
`参数：string | object`
```
//参数对象说明
var opt = {
title:"温馨提示",//修改标题头文案
msg:"是否更新？",//弹窗文本文案
html:"是否更新？",//html内容; 当html有效值传入，msg文案会被html替代，失效
okText:'确定',//确定按钮文案
noText:'取消',//取消按钮文案
wait:(next) => {//确定按钮异步处理关闭函数
//默认一个next参数
next();//调用关闭
},
noCb:() => {//取消按钮处理关闭函数
console.log("您点击了关闭")
}
}
//支持单个字符串传参
dialogx.Confirm("666");
//支持对象传参
dialogx.Confirm({ msg:"666" })
//支持Promise链式
dialogx.Confirm({ msg:"666" }).then(res => {
//点击确定，并关闭了弹窗
})
//支持异步关闭
dialogx.Confirm({
msg:'支持异步关闭, 2秒后关闭',
wait:(next) => {
setTimeout(() => {
next()//调用关闭
}, 2000)
}
})
```
##### Prompt
`使用方式：dialogx.Prompt `
`参数： object`
`验证方式：rules: [Object]`
```
Object:[
{ required: true, tip: '提示：内容不能为空', trigger: 'change' },
{ validator : checkUp, trigger: 'change' }
]
trigger: string || Array['change', 'blur'...]
```
```
//事例
dialogx.Prompt({
rules: [
{ required: true, tip: '提示：内容不能为空', trigger: 'change' },
{ validator : checkUp, trigger: ['change', 'blur'] }
],
//异步
wait:(next, value) => {
setTimeout(() => {
next();
}, 2000)
},
//取消
noCb:(next) => {
next();
},
})
//自定义检验
let checkUp = (value, callback) => {
if(false){
return callback({error:'提示：内容不能带字母'});
}
callback();
}
```
##### Action
`使用方式：dialogx.Action `
`参数：object`
```
//参数对象说明
var opt = {
title:"温馨提示",//修改标题头文案
msg:"系统有新的更新通知？",//弹窗文本文案
html:"是否更新？",//html内容; 当html有效值传入，msg文案会被html替代，失效
hand:[//action 项数组文案格式
{ key:0, value:'查看并更新' },
{ key:1, value:'一小时后通知' },
{ key:2, value:'明天此时通知' },
{ key:3, value:'不了，谢谢' }
],
wait:(next) => {//选择按钮异步处理关闭函数
//默认一个next参数
next();//调用关闭
},
}
//支持异步关闭
dialogx.Action({
msg:'系统有新的更新通知',
hand:[
{ key:0, value:"立即更新" },
{ key:1, value:"稍后1小时通知" },
{ key:2, value:"稍后2小时通知" },
{ key:3, value:"明天在通知" },
{ key:4, value:"不了, 谢谢" },
],
wait:(next, value) => {
setTimeout(() => {
next();
console.log("选择了key是" + value)
}, 2000)
}
})
```
##### Img
`使用方式：dialogx.Img `
`参数：sting | object`
```
//参数对象说明
var opt = {
title:"温馨提示",//修改标题头文案
msg:"系统有新的更新通知？",//弹窗文本文案
html:"是否更新？",//html内容; 当html有效值传入，msg文案会被html替代，失效
hand:[//action 项数组文案格式
{ key:0, value:'查看并更新' },
{ key:1, value:'一小时后通知' },
{ key:2, value:'明天此时通知' },
{ key:3, value:'不了，谢谢' }
],
wait:(next) => {//选择按钮异步处理关闭函数
//默认一个next参数
next();//调用关闭
},
}
//支持异步关闭
dialogx.Action({
msg:'系统有新的更新通知',
hand:[
{ key:0, value:"立即更新" },
{ key:1, value:"稍后1小时通知" },
{ key:2, value:"稍后2小时通知" },
{ key:3, value:"明天在通知" },
{ key:4, value:"不了, 谢谢" },
],
wait:(next, value) => {
setTimeout(() => {
next();
console.log("选择了key是" + value)
}, 2000)
}
})
```
##### Pin
`使用方式：dialogx.Pin `
`参数：object`
```
//事例
pinLen：4 - 8
dialogx.Pin({
pinLen: 4,
wait:(next, value) => {
next()
}
})
```
##### 提示层：success，warn，error
`使用方式：dialogx.success, dialogx.warn, dialogx.error`
`参数：{msg:提示, time:显示时间（默认2500ms）, hasMark:遮罩层（默认false）}`
```
dialogx.success({
msg: '炮打罗渣男',
time: 3000,
hasMark: true
})
dialogx.warn('大老们')
dialogx.error('炮打罗渣男', 3000, true)
```
##### 加载/请求状态：loading
`使用方式：dialogx.loading`
`参数：{msg:提示, time:显示时间（默认无限）, hasMark:遮罩层（默认false）}`
```
dialogx.loading('加载中...')
dialogx.loading('加载中...','','')
dialogx.loading('加载中...', 1000000, true)
dialogx.loading(false) //关闭加载弹窗 参数：false
```