vex是一个非常轻量(压缩后只有5.5KB)的对话框组件,它的API简单易用,适用于桌面和移动浏览器页面,不依赖于其他库,还可以根据自己的需要快速定制。
这里简单说一下它的高级用法:阻止默认点击消失。
vex实例默认在打开的状态下,点击对话框上的任意位置会导致对话框隐藏并从DOM中移除。但经常遇到一些场景,需要让对话框保持打开的状态,并且屏蔽用户点击。比如用户上传文件时,弹出一个上传进度对话框,需要在上传过程中禁止用户点击导致对话框关闭,直到文件上传完成后,才能关掉对话框。
根据官方提供的文档,vex.defaultOptions
除接受原始类型的参数值外,还接受三个回调函数:
- afterOpen
- afterClose
- beforeClose
我们可以通过把beforeClose
的返回值设置为false
来阻止对话框关闭,这样一来,任何关闭对话框的方法都会失败,包括vex.close()
和vex.closeAll()
。
那么如何让对话框关闭呢?
聪明的你一定猜到了,把beforeClose
的返回值设置为true
即可!下面就行我们要做的:
vexInstance.options.beforeClose = function(){
return true
}
其中vexInstance
就是vex对话框的实例,可以在初始化的时候保存在一个变量里,也可以用vex.getById()
或vex.getAll()
方法获得。
参考:vex官方文档