当用户单击以打开新弹出窗口时,关闭所有弹出窗口

时间:2017-06-18 10:20:23

标签: javascript vue.js

我是Vue 2.3.3用户,我有一个弹出子菜单系统。

HeaderSubmenu是组件的名称,它显示用于打开/关闭子菜单的按钮,以及显示子菜单时的子菜单。

这是组件的模板:

<template>
  <li class="header-submenu">
    <!-- élément du header servant à ouvrir le sous-menu -->
    <header-link v-bind="$props" :href="to ? false : '#'" @click.native.stop="toggle">
      <slot name="item"></slot>
    </header-link>
    <!-- sous-menu -->
    <ul class="submenu-list" :class="{'open': open, 'animated': animated}" @animationend="displaynone()" v-clickout="hide">
      <slot></slot>
    </ul>
  </li>
</template>

该组件使用包含toggle()hide()方法的mixin。这两种方法在openanimated数据变量中放置了正确的值。 然后,CSS样式应用正确的显示属性和动画。 (当我编码我没有了解内置组件时,我稍后会重做这件事。)

用于切换CSS类的Mixin:

export default {
  data () { return {
    open: false,
    animated: false
  };},

  methods:{
    toggle(e){
      this.animated = true;
      this.open = !this.open;
    },
    displaynone(e){
      if(!this.open) this.animated = false;
    },
    show(e){
      if(!this.open){
        this.animated = true;
        this.open = true;
      }
    },
    hide(e){
      if(this.open){
        this.animated = true;
        this.open = false;
      }
    },
  }
}

v-clickout是一个自定义指令,当用户点击它不在元素上的某个位置时,调用方法hide()(这里就是它)。 因此,我必须在按钮单击事件上放置stop修饰符,以防止弹出窗口在打开后立即关闭。

指令点击:

export default {
  bind(el, binding, vnode) {
    el.event = function (event) {
      // here I check that click was outside the el and his childrens
      if (!(el == event.target || el.contains(event.target))) {
        // and if it did, call method provided in attribute value
        vnode.context[binding.expression](event);
      }
    };
    document.body.addEventListener('click', el.event)
  },
  unbind(el) {
    document.body.removeEventListener('click', el.event)
  },
};

现在的问题是,我不能在同一页面上有两个(或更多)这些弹出菜单: 如果我打开第一个弹出菜单,然后打开第二个弹出菜单,由于stop修饰符,第一个弹出菜单不会关闭。我想一次打开一个弹出菜单。如果我们打开一个新的,则已经打开的弹出菜单将关闭。

我怎样才能做到这一点? 当用户触发新的弹出菜单时,是否必须注册所有打开的弹出窗口才能关闭它们?

感谢您的帮助!

0 个答案:

没有答案