dialogx/README.md

no reliance on third-party apple iphonx like popups

### 欢迎使用 Dialogx
<p align="center">
  <img src="https://img.shields.io/npm/dm/dialogx.svg" />
  <br>
  </a>
  <img alt="npm type definitions" src="https://img.shields.io/npm/types/dialogx">
  <img alt="npm" src="https://img.shields.io/npm/v/dialogx">
</p>


`害，2020年，因为一直蝙蝠🦇的影响，只能一本正经的打开项目翘起来，遇到老铁方要分离弹窗库到斯蒂恩，发现正在使用的vue弹窗还没发分离，还必须依赖vue去运行，决定独立封包，就一本正经的抄起来，怎么快，怎么来。抄着抄着，要是手头的react那个项目要用呢，只能继续抄，继续改，废话多了.... 【有时项目为了加入弹层的交互模式，就要引入那些比较大的UI框架，虽说有些可以按需加载，但还是觉得重，不够轻量；】`

## Links(文档)


<!--[documentation(文档)](https://charod.gitee.io/gjfc-doc/)-->
<a href="https://charod.gitee.io/gjfc-doc/" target="_blank">documentation（官方文档）</a>

##### 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:"<span style='color:red'>是否更新？</span>",//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:"<span style='color:red'>是否更新？</span>",//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:"<span style='color:red'>是否更新？</span>",//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:"<span style='color:red'>是否更新？</span>",//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 
```