npm:dialogx | Skypack

README

欢迎使用 Dialogx

npm type definitions npm

害，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:"<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) 
    } 
})

使用方式：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

Usage no npm install needed!