Miss any of our Open RFC calls?Watch the recordings here! »

dialogx

3.1.11 • Public • Published

欢迎使用 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) 
    } 
})
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 

Install

npm i dialogx

DownloadsWeekly Downloads

5

Version

3.1.11

License

MIT

Unpacked Size

152 kB

Total Files

9

Last publish

Collaborators

  • avatar
  • avatar