迁移“检测外部点击"从 Vue 2 到 Vue 3 的自定义指令 [英] Migrating "detect click outside" custom directive from Vue 2 to Vue 3

问题描述

基于这个问题检测点击元素外和这个答案https://stackoverflow.com/a/42389266，我正在尝试将指令从 Vue 2 迁移到 Vue 3.似乎 binding.expression 和 vnode.context 不再存在.我怎样才能让它工作?

app.directive('click-outside', {beforeMount (el, binding, vnode) {el.clickOutsideEvent = 函数(事件){if (!(el === event.target || el.contains(event.target))) {vnode.context[binding.expression](event);}};document.body.addEventListener('click', el.clickOutsideEvent);},未安装(el){document.body.removeEventListener('click', el.clickOutsideEvent);}});

解决方案

您可以像这样使用 binding.value 代替:

const { createApp } = Vue;const highlightEl = (颜色) =>(事件, el) =>{如果 (el) {el.style.background = 颜色；} 别的 {event.target.style.background = 颜色；}}const clearHighlightEl = (event, el) =>{如果 (el) {el.style.background = '';} 别的 {event.target.style.background = '';}}const app = Vue.createApp({设置() {返回 {突出显示，清除突出显示El}}})app.directive('click-outside', {beforeMount(el, binding, vnode) {el.clickOutsideEvent = 函数(事件){if (!(el === event.target || el.contains(event.target))) {binding.value(event, el);}};document.body.addEventListener('click', el.clickOutsideEvent);},卸载(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="应用程序"><h1 v-click-outside="highlightEl('yellow')" @click="clearHighlightEl">元素 1</h1><p v-click-outside="highlightEl('#FFCC77')" @click="clearHighlightEl">元素 2</p>

Based on this question Detect click outside element and this answer https://stackoverflow.com/a/42389266, I'm trying to migrate the directive from Vue 2 to Vue 3. It seems that binding.expression and vnode.context not exists more. How can I make it work?

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);
    }
});

解决方案

You can use binding.value instead like this:

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', {
  beforeMount(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>

这篇关于迁移“检测外部点击"从 Vue 2 到 Vue 3 的自定义指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！