Question

我有这个Vue代码：

export default {
   data: function() {
     return {
       'showPopup': false
     }
   },
   components: {
     'search-bar': SearchBarComponent,
   },
   mounted: function() {
     $(this.$el).foundation();
   },
   updated: function() {
     $(this.$el).foundation();
   },
   methods: {
     clickOutsidePopup: function(event) {
       console.log(event);
     }
   },
   directives: {
     clickoutside: {
       bind (el) {
         el.event = event => el.vm.$emit(el.expression, event)
         el.addEventListener('click', el.stopProp)
         document.body.addEventListener('click', event)
       },   
       unbind(el) {
         el.removeEventListener('click', el.stopProp)
         document.body.removeEventListener('click', el.event)
       },

       stopProp(event) { event.stopPropagation() }
     }
   }
 }

在模板中，我有这个：

<div class="small-screen popup-container">
   <div class="popup" v-show="showPopup" v-clickoutside="clickOutsidePopup">
     <search-bar />
   </div>
 </div>

如果单击此按钮，它将显示/隐藏：

<a href="#"> <span @click="showPopup = !showPopup">&#128269;</span></a>

我的问题是我的指令未执行clickOutsidePopup。当我在元素之外单击时？我受此启发：Detect click outside element

Answer 1

我设法使其与以下指令代码一起工作：

  directives: {
    clickoutside: {
      bind: function (el, binding, vnode) {
        el.clickOutsideEvent = function (event) {
          // here I check that click was outside the el and his childrens
          if (!(el == event.target || el.contains(event.target))) {
            // and if it did, call method provided in attribute value
            vnode.context[binding.expression](event);
          }
        };
        document.body.addEventListener('click', el.clickOutsideEvent)
      },
      unbind: function (el) {
        document.body.removeEventListener('click', el.clickOutsideEvent)
      },
    } 
  }

在搜索按钮中添加了一个ID：

<span id="top-bar-search-icon" @click="showPopup = !sho    wPopup">&#128269;</span>

并修改了我的方法：

  methods: {
    clickOutsidePopup: function(event) {
      if (event.target.id !== "top-bar-search-icon")
        this.showPopup = false;
    }
  },

如何确保我的指令运行功能？

1 个答案: