javascript - 单击正文关闭下拉组件

Question

我正在使用 Vue.js，但我认为我使用的是什么库并不重要，只要一个允许您拥有 Web 组件的库即可。无论如何 - 我有一个下拉组件(见下面的代码)，我需要知道，如何关闭 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>

下拉.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>