vue.js - 在自定义 Vue 指令中执行表达式而不是调用方法

Question

我正在使用以下 Vue 指令来检测元素外的点击:

Vue.directive('click-outside', {
    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)
    },
  });

当我提供这样的方法时效果很好:

<div id="profile-list-container" v-click-outside="closeProfiles">

但是当我在属性中放置一个直接表达式时，它什么也没做:

<div id="profile-list-container" v-click-outside="isProfileOpen = false">

我看到行 vnode.contextbinding.expression;是哪里出了问题，但我不确定如何更改它以使其正常工作。

Answer 1

因为binding.expression是一个字符串，所以导致vnode.context[binding.expression]未定义，所以vnode.context[binding.expression](value)会失败。

然后检查Vue Github ，它描述了为什么 v-click-outside="isProfileOpen = false" 不起作用，你可以查看演示(测试用例 3)看看会发生什么。

如果您可以转换为 v-click-outside="()=>{showDiv1 = !showDiv1}"，下面是一个示例:

let vMyDirective = {}
vMyDirective.install = function install (_Vue) {

  _Vue.directive('click-outside', {
    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
          //console.log(binding.value, binding.expression)
          if(typeof binding.value==='function') {
            binding.value.bind(vnode.context)(event)
          } else {
            let expression = ''
            let beg = ["'", '`', '"'].includes(binding.expression[0]) ? 1 : 0
            let count = ["'", '`', '"'].includes(binding.expression[binding.expression.length -1]) ? binding.expression.length -1 : binding.expression.length
            expression = binding.expression.substring(beg, count)
            new Function(expression).bind(vnode.context)(event)
          }
        }
      };
      document.body.addEventListener('click', el.clickOutsideEvent)
    },
    unbind: function (el) {
      document.body.removeEventListener('click', el.clickOutsideEvent)
    },
  })
}

Vue.use(vMyDirective)

new Vue({
  el: '#app',
  data() {
    return {
      showDiv1: true,
      showDiv2: true,
      showDiv3: true
    }
  },
  methods:{
    clickOutside: function (ev) {
      console.log('test case 1', ev.toString())
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <div>Test</div>
  <div v-click-outside="clickOutside">
    Test Case 1
  </div>
  <div v-click-outside="()=>{showDiv1 = !showDiv1}">
    Test Case 2: 
    <span v-show="showDiv1" style="background-color:red">Test Case 2: You clicked outside!!!</span>
  </div>
  <div v-click-outside="showDiv2 = false">
    Test Case 3: 
    <span v-show="showDiv2" style="background-color:red">Test Case 3: You will see showDiv2 is false...!!!</span>
  </div>
  <div v-click-outside="`this.showDiv3 = !this.showDiv3`">
    Test Case 4: 
    <span v-show="showDiv3" style="background-color:red">Test Case 4: You clicked outside!!!</span>
  </div>
</div>