如何从第三方库更改组件行为

Question

我正在使用 Nuxt3 for Vue3 和组合 API 构建一个网站。我不明白如何覆盖库组件属性。这里我使用Radix-vue。使用 NavigationMenu 组件时，NavigationMenuTrigger 由事件

pointerenter

、

pointermove

和

pointerleave

触发。我找不到如何防止这种情况。使用

@pointerenter.prevent

不起作用。如果我尝试创建一个新的事件处理程序：

<NavigationMenuTrigger
    @pointerenter="overrideHandler"
    @pointermove="overrideHandler"
    @pointerleave="overrideHandler"
  >
mytrigger
 </NavigationMenuTrigger>


<script setup lang="ts">
function overrideHandler() {
  // Do nothing
}
</script>

只需将其添加到现有的即可。我还尝试将 NavigationMenuTrigger 包装到自定义组件中，但这也不起作用。

Answer 1

1 - 覆盖在设计上不起作用。
2 - 实现这一目标的方法是停止传播

<!-- [...]
<NavigationMenuTrigger
  @pointermove.stop="stopPropagation"
  @pointerenter.stop="stopPropagation"
  @pointerleave.stop="stopPropagation"
>
myTrigger
</NavigationMenuTrigger>

<!-- [...] -->
<script setup lang="ts">
function stopPropagation(event) {
  event.stopImmediatePropagation();
}
</script>

如果它可以帮助某人。 至于技术细节，我仍然不完全理解为什么阻止不起作用等，所以我宁愿让其他人解释。