代码之家 › 专栏 › 技术社区 › timpone

如何捕获单击以关闭除模式之外的所有模式

vuejs2 vue.js javascript

0

timpone · 技术社区 · 7 年前

我使用的模式类似于Vue文档中的模式组件: https://vuejs.org/v2/examples/modal.html (好的,完全一样)。

我想让它这样点击模式之外的任何地方关闭它。我该怎么做?

2 回复 | 直到 7 年前

1

0

Drew Snow 7 年前

您可以使用以下代码使之成为隐藏消息,以便在单击其他任何内容时将其隐藏。您可能需要更改它以使其与脚本一起工作。

//The background of the image, the area that clicking makes it close.
var modalBackground = document.getElementsById("modal-mask")[0];
window.onclick = function(e) {
    //Testing if the target is the background
    if (e.target == modalBackground ) {
        //Hides the message
        modal.style.display = "none";
    }
}

2

0

timpone 7 年前

这通过检测单击了哪个类来修复它:

  <div class="modal-mask" @click="closeModal($event)">
    <div class="modal-wrapper">
      <div class="modal-dialog" role="document">

稍后在组件中:

  methods:{
    closeModal(event){
      if(event.target.className == 'modal-wrapper'){
        EventBus.$emit('hideModal');
      }
    },