如何阻止vex对话框默认关闭

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官方文档

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,627评论 25 709
  • //我所经历的大数据平台发展史(三):互联网时代 • 上篇http://www.infoq.com/cn/arti...
    葡萄喃喃呓语阅读 51,473评论 10 200
  • 雷雁雄8月4日总结:今天在公司学习,下午朋友来公司喝茶,聊了很多,聊着聊着思路就开悟了,有时停下来看看其实也是必须的。
    雷雁雄阅读 1,495评论 0 0
  • 在寸土寸金的大城市买个房子不容易,有时为了更好的地段对于采光问题只能够选择将就。 那么客厅采光不足怎么解决呢? 首...
    零落凡尘阅读 1,774评论 0 1
  • 人生不相见,动如参与商。 我们在一生中都很少相见,就好像永不相见的参商两星。 今夕复何夕,共此灯烛光。 今夜是什么...
    Nikita1986阅读 1,930评论 0 0