Question

我有一个dropdown-button组件，它有一个点击列表。该按钮有一些文字和图标。如果我们在轮廓上小心点击按钮而不是文本或图标上的按钮，则会触发点击事件。这是我的组成部分：

<template lang="html">
<div>
  <button class="button dropbtn" @click="toggleDropdown">
    <span>{{ name }}</span>
    <span class="icon"><i class="fa fa-caret-down"></i></span>
  </button>
  <div v-show="visible" class="dropdown-content is-primary-important">
    <slot>
    </slot>
  </div>
</div>
</template>

<script>
export default {
  props: ['name'],
  data: function() {
    return {
      visible: false
    }
  },
  mounted: function() {
    this.hideDropdownOnClick();
  },
  methods: {
    toggleDropdown: function() {
      // trigged on click of the button
      // make the dropdown visible
      console.log("toggling dropdown");
      this.visible = !this.visible;
    },
    hideDropdownOnClick: function() {
      window.onclick = (event) => {
        console.log(event.target);
        if (!event.target.matches('.dropbtn')) {
          console.log("here", this.visible);
          this.visible = false;
        }
      }
    }
  }
}
</script>

<style lang="css">
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  position: absolute;
  background-color: #fff;
  min-width: 140px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
</style>

我觉得我在这里遗漏了一些非常基本的东西，有人可以帮助我吗？感谢。

修改

这个问题的答案似乎是浏览器的一个错误： Button element not firing click event when clicking on button text and releasing off it (but still inside the button)?

Answer 1

添加此CSS规则可以解决我的问题：

span {
    pointer-events: none;
}

Answer 2

当你点击跨度切换两次:)一次通过toggleDropdown方法，第二个是通过windows onclick处理程序。

这是工作示例：jsfiddle

<template id="tmp">
  <div>
  <button class="button dropbtn" @click="toggleDropdown">
    <span>{{ name }}</span>
    <span class="icon"><i class="fa fa-caret-down"></i></span>
  </button>
  <div v-show="visible" class="dropdown-content is-primary-important">
    <slot>
    </slot>
  </div>
</div>
</template>

<div id="x">
  <tmp name="my name">
     <span>toggle me!</span>
  </tmp>
</div>

Vue.component('tmp', {
template: '#tmp',

props: ['name'],
data: function() {
return {
  visible: false
}
},
mounted: function() {
this.hideDropdownOnClick();
},
methods: {
toggleDropdown: function() {
  // trigged on click of the button
  // make the dropdown visible
  console.log("toggling dropdown");
  this.visible = !this.visible;
}
}
});

new Vue({
el: '#x',
data: function(){
    return {
    name: 'myName'
  }
}
});

编辑：如果您不想使用clickaway，这是一个小指令来检测元素之外的点击次数：

var VueClickOutSide = {

    bind: function(el, binding, vNode) {
        var bubble = binding.modifiers.bubble;
        var handler = function(e) {
            if (bubble || (!el.contains(e.target) && el !== e.target)) {
                binding.value(e);
            }
        }
        el.__vueClickOutside__ = handler;
        document.addEventListener('click', handler);
    },

    unbind: function (el, binding, vNode) {
        document.removeEventListener('click', el.__vueClickOutside__);
        el.__vueClickOutside__ = null;
    }
};

您只需注册该指令：

Vue.directive('click-outside', VueClickOutSide)

并在模板中使用它：

 v-click-outside:delay="hideDropdownOnClick"

Answer 3

点击外部时，您可以使用vue-clickaway隐藏下拉菜单：

$ npm install vue-clickaway --save
import { mixin as clickaway } from 'vue-clickaway';
export default { mixins: [ clickaway ], ... the rest of your code ...
您将v-clickaway="visible = false"放入dropdown-button组件的根div中。

Answer 4

点击即可显示并立即隐藏列表。您单击文本或图标（它们是“span”），

this.visible = !this.visible;

然后代码转到 window.onclick 其中

if (!event.target.matches('.dropbtn'))

你的跨度没有这门课。所以你设置

 this.visible = false;

将检查更改为

    if (!event.target.closest('.dropbtn'))

在按钮内单击子元素时，不会触发父onClick

4 个答案: