用原生js监听vue里调用的bootstrap模态框

84 阅读 0 评论 56 点赞

我是靠谱客的博主优美树叶，最近开发中收集的这篇文章主要介绍用原生js监听vue里调用的bootstrap模态框，觉得挺不错的，现在分享给大家，希望可以做个参考。

因为是MVC的项目，所以虽然用了vue，但不是我们平常写的SPA，而是在页面中去单独引用。

那么当我们在vue中去调用bootstrap中的模态框时，怎么去监听模态框的显示和隐藏呢？

首先，对于bootstrap中的模态框显示隐藏的监听，bootstrap本身是有一套方法的。

事件类型	描述
show.bs.modal	show方法调用之后立即触发该方法。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的relatedTarget属性进行访问。
shown.bs.modal	此事件在模态框已经显示出来（并且同时在CSS过渡效果完成）之后触发。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的relatedTarget属性进行访问。
hide.bs.modal	hide方法调用之后立即触发事件。
hidden.bs.modal	此事件在模态框被隐藏（并且同时在CSS过渡效果完成）之后被触发。
loaded.bs.modal	从远端的数据源加载完数据之后触发该事件。

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

那么我们说如果是使用上述方法，一般情况下是可以正常监听到事件的，但是对于一些特殊场景，就显得有些low了，比如在vue中去调用了bootstrap的模态框，但是你又使用了上述的方法，你会发现，这个js并没有监听到模态框的状态。

这是因为js代码是单线程自上而下执行的，而当这段代码执行的时候，vue里的代码还没有执行，所以你根本监听不到元素，那么这个时候我们应该怎么写呢？

$("document").on("show.bs.modal", ".modal", function(e) {
    // do something...
})

这样写的好处是，即使是动态创建的元素在该选择器中范围内也是能触发回调函数的。那这里就是应用了事件委托的原理。

公众号：Coder 杂谈，欢迎关注
在这里插入图片描述

以上就是优美树叶为你收集整理的用原生js监听vue里调用的bootstrap模态框的全部内容，希望文章能够帮你解决用原生js监听vue里调用的bootstrap模态框所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。