Question

我正在使用Vue.js，我不认为我使用的是什么lib，只是允许你拥有web组件的lib。无论如何 - 我有一个下拉组件（见下面的代码），我需要知道，如何关闭身体点击下拉列表？如果它是一个拥有自己的作用域数据的组件，我假设你不能只是向主体添加一个事件监听器，它超出了范围，对吧？我该怎么做呢？

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>

单击正文时关闭下拉组件

1 个答案: