从 Vue 2 迁移到 Vue 3 后，SVG 动画 endEvent 未触发

问题描述

我目前正在将一个 vue 2 / Quasar 1 项目迁移到 vue 3 / Quasar 2 并且我正在为一个 SVG 动画元素上的事件而苦苦挣扎，该事件在新版本中似乎没有触发....

<animateTransform
    begin="startAnimation.begin"
    attributeName="transform"
    attributeType="XML"
    type="rotate"
    from="-18 150 380"
    to="0 150 380"
    dur="0.6s"
    repeatCount="1"
    fill="freeze"
    calcMode="spline"
    keySpli@R_502_6431@="0.3 0.7 0.3 0.7"
    keyTimes="0;1"
    @endEvent="animationEndHandler()"
/>

endEvent 事件 (https://developer.mozilla.org/en-US/docs/Web/API/SVGAnimationElement/endEvent_event) 在旧版本中运行良好，但在新版本中没有任何反应。其他一切都一样，我已经尝试将 animationEndHandler 方法减少到只有 console.log('hello')

我已经在 Mac 上的 Chrome 和 Safari 中尝试过，并使用适用于 iOS 的 Cordova 构建，所以我相信这不是浏览器问题，因为旧版本可以在相同的浏览器中运行。

仅仅因为我没有其他任何东西可以尝试，我也尝试了以下所有......

@endEvent="animationEndHandler"
@endevent="animationEndHandler"
@end-event="animationEndHandler"
@endevent="animationEndHandler()"
@end-event="animationEndHandler()"
v-on:endEvent="animationEndHandler()"
v-on:endEvent="animationEndHandler"
v-on:endevent="animationEndHandler()"
v-on:endevent="animationEndHandler"
v-on:end-event="animationEndHandler()"
v-on:end-event="animationEndHandler"

当我检查 chrome 开发工具中的 <animateTransform> 元素并查看右侧的 Event Listeners 选项卡时，我可以在其中看到“endevent”，并且在处理程序中引用了我的 animationEndHandler，但它似乎永远不会被调用。

如果有人能就为什么这在 Vue 3 下不再有效提供任何建议，我将不胜感激！

解决方法

我不清楚原因（可能是 Vue 3 错误），但您可以通过声明自己的 custom directive 来模拟 v-on（@ 是其简写）来解决它).

例如，本地注册一个指令，命名为on2：

export default {
  directives: {
    on2: {
      mounted(el,binding) {
        // <div v-on2:foo="bar">  ->  binding = { arg: 'foo',value: this.bar }
        el.addEventListener(binding.arg,binding.value);
      },},}

或者全局注册指令：

createApp(...)
  .directive('on2',{
    mounted(el,binding) {
      el.addEventListener(binding.arg,binding.value);
    },})
  .mount('#app')

并在您的模板中使用它：

<animateTransform v-on2:endEvent="animationEndHandler" />

Vue 3 demo