Question

我是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。这两种方法在open和animated数据变量中放置了正确的值。然后，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 个答案: