如何检测点击子女的vuenux自定义指令？

Question

当我尝试Vue.js自定义指令时，我尝试创建搜索内的下拉菜单时，我很难受。我不知道如何检测孩子们的点击情况

<div v-dropdown-directive class="dropdown">
  <div class="title">This is dropdown title</div>
  <div class="close">Close dropdown</div>
</div>

指令

import Vue from 'vue'
Vue.directive('dropdown-directive', {
  bind (el) {
    el.event = (e) => {
      if (el === e.target) {
        console.log('parent clicked')
        el.classList.add('open') // this will add class open to parent, so dropdown will open
      } else if (el.contains(e.target)) {
        console.log('children clicked')
        // this is working, but when I click on children has class "title" i'ts also working,
        // I want only work when I click on children contain class "close"
      } else if (!el.contains(e.target)) {
        console.log('detect click outside')
        el.classList.remove('open')
      }
    }
  }
})

Answer 1

在下面的片段中，如果你点击红色，那就是父元素。

• 如果你点击红色，那就是父元素。
• 如果你点击蓝色的标题，那就是标题元素了
• 如果你点击蓝色的关闭，它就是关闭元素
• 如果你在父元素之外点击，它就在父元素之外了

Vue.directive('DropdownDirective', {
  bind(el, binding) {
    let type = binding.arg;
    const clickFunction = (e) => {
      if (e.target.classList.contains('close')) {
        console.log('close')
      } else if (e.target.classList.contains('title')) {
        console.log('title:', e.target.textContent)
      } else if (e.target === el) {
        console.log('parent')
      } else {
        console.log('outside')
      }
    }
    // adding a general eventListener, so you can check for clicks outside
    window.addEventListener(type, clickFunction);
  }
})

new Vue({
  el: "#app"
})

.dd-item {
  width: 50%;
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-dropdown-directive:click class="dropdown" style="background-color:red;">
    <div class="title dd-item">This is dropdown title</div>
    <div class="close dd-item">Close dropdown</div>
  </div>
</div>

重点是，你必须定义你想监听的事件。

• 你必须定义你想监听的事件。在这段代码中，我把它定义为指令(:click)，并将该参数用在绑定了
• 你必须为该事件添加监听器（就像任何应该监听事件的JS代码一样）。
• 你必须定义该函数的回调函数。eventListener

更多关于 Vue 指令。https:/vuejs.orgv2guidecustom-directive.html。