单击 body 关闭下拉组件

Question

我正在使用 Vue.js，但我认为我使用的是什么库并不重要，重要的是允许您拥有 Web 组件的库。无论如何 - 我有一个下拉组件（见下面的代码），我需要知道，如何在 body 单击时关闭下拉菜单？如果它是一个具有自己范围数据的组件，我假设您不能只向 body 添加一个事件侦听器，它超出了范围，对吗？我该怎么做？

dropdown.template.html

<li class="dropdown">
    <a href="#" tabindex="1" v-on="click: toggleDropdown($event), keydown: closeDropdown($event) | key 'esc'"><content select=".dropdown__button"></content></a>
</li>

<ul class="dropdown__menu" v-show="displayed">
    <content select=".menu"></content>
</ul>

dropdown.js

module.exports = {
  template: require('../views/dropdown.template.html'),

  data: function() {
    return {
      displayed: false
    };
  },

  methods: {
    toggleDropdown: function(e) {
      e.preventDefault();

      this.displayed = !this.displayed;
    },

    closeDropdown: function(e) {
      e.preventDefault();
      e.stopPropagation();

      this.displayed = false;
    }
  }
}

Answer 1

您应该添加 blur 事件：

<a href="#" tabindex="1" v-on="click: toggleDropdown($event), keydown: closeDropdown($event) | key 'esc', blur: closeDropdown($event)"><content select=".dropdown__button"></content></a>

单击 body 关闭下拉组件

Close a dropdown component on body click

html

javascript

web-component

vue.js