将“检测外部点击”自定义指令从 Vue 2 迁移到 Vue 3

Question

基于这个问题 Detect click outside element 和这个答案 https://stackoverflow.com/a/42389266 ，我正在尝试将指令从 Vue 2 迁移到 Vue 3。似乎 binding.expression 和 vnode.context 不存在更多。我怎样才能让它发挥作用？

 app.directive('click-outside', {
    beforeMount (el, binding, vnode) {
        el.clickOutsideEvent = function (event) {
            if (!(el === event.target || el.contains(event.target))) {
                vnode.context[binding.expression](event);
            }
        };
        document.body.addEventListener('click', el.clickOutsideEvent);
    },
    unmounted (el) {
        document.body.removeEventListener('click', el.clickOutsideEvent);
    }
});

原文由 Sauron 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 binding.value 而不是像这样：

 const { createApp } = Vue;

const highlightEl = (color ) => (event, el) => {
  if (el) {
    el.style.background = color;
  } else {
    event.target.style.background = color;
  }
}
const clearHighlightEl = (event, el) => {
  if (el) {
    el.style.background = '';
  } else {
    event.target.style.background = '';
  }
}

const app = Vue.createApp({
  setup() {
    return {
      highlightEl,
      clearHighlightEl
    }
  }
})

app.directive('click-outside', {
  mounted(el, binding, vnode) {
    el.clickOutsideEvent = function(event) {
      if (!(el === event.target || el.contains(event.target))) {
        binding.value(event, el);
      }
    };
    document.body.addEventListener('click', el.clickOutsideEvent);
  },
  unmounted(el) {
    document.body.removeEventListener('click', el.clickOutsideEvent);
  }
});

app.mount('#app')

 <script src="https://unpkg.com/vue@3.0.0-rc.11/dist/vue.global.prod.js"></script>

<div id="app">
  <h1 v-click-outside="highlightEl('yellow')" @click="clearHighlightEl">Element 1</h1>
  <p v-click-outside="highlightEl('#FFCC77')" @click="clearHighlightEl">Element 2</p>
</div>

原文由 Daniel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

脱离上下文，在 vue3 中有一种更简单的组合方式。

链接到 Vueuse ClickOutside (Vue 3)

链接到 Vueuse ClickOutside（Vue 2）

 <template>
  <div ref="target">
    Hello world
  </div>
  <div>
    Outside element
  </div>
</template>

<script>
import { ref } from 'vue'
import { onClickOutside } from '@vueuse/core'

export default {
  setup() {
    const target = ref(null)

    onClickOutside(target, (event) => console.log(event))

    return { target }
  }
}
</script>

原文由 Min Somai 发布，翻译遵循 CC BY-SA 4.0 许可协议