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

基于这个问题和答案，我正在尝试将指令从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);
    }
});

---

您可以像这样使用

binding.value

：

const{createApp}=Vue；
常量高亮灯=（颜色）=>（事件，el）=>{
如果（el）{
el.style.background=颜色；
}否则{
event.target.style.background=颜色；
}
}
常数clearHighlightEl=（事件，el）=>{
如果（el）{
el.style.background=''；
}否则{
event.target.style.background=''；
}
}
const app=Vue.createApp({
设置（）{
返回{
highlightEl，
晴空灯塔
}
}
})
应用程序指令（“点击外部”{
安装前（el、绑定、vnode）{
el.ClickOutside事件=功能（事件）{
如果（！（el==event.target | | el.contains（event.target）））{
绑定值（事件，el）；
}
};
document.body.addEventListener（'click'，el.clickOutside事件）；
},
卸载（el）{
document.body.removeEventListener（'click'，el.clickOutside事件）；
}
});
app.mount（“#app”）

要素1
元素2

脱离上下文，在vue3中有一种更简单的合成方法

你好，世界
外部元素
从“vue”导入{ref}
从'@vueuse/core'导入{onClickOutside}
导出默认值{
设置（）{
常数目标=ref（空）
onClickOutside（目标，（事件）=>console.log（事件））
返回{target}
}
}

我不知道您的具体使用情况，但很多时候人们想要使用外部点击事件，他们没有考虑可访问性，因为只有键盘用户可能需要在外部发生模糊事件或“聚焦”时使用相同的功能。如果你不想重新发明轮子，你可以添加另一个库，这是一个很棒的库，我过去用过它来实现单击外部和模糊外部@maxshuty感谢您的建议，但是所显示的库是针对vue 2的。这是一个真正的vue3解决方案