[Menu]在nuxt3里面鼠标悬浮或者点击子菜单不出现 元素代码里面出现一瞬间就消失了

[ouyangtsin]

trafficstars

tdesign-vue-next 版本

0.15.4

重现链接

No response

重现步骤

[导航菜单]在nuxt3里面鼠标悬浮或者点击子菜单不出现 元素代码里面出现一瞬间就消失了

期望结果

No response

实际结果

No response

框架版本

3.2.33

浏览器版本

101.0.4951.67

系统版本

win10

Node版本

14.18.1

补充说明

tdesign-vue-next-nuxt-starter这个示例里面也不行刷新了就不行了

[github-actions[bot]]

👋 @ouyangtsin，感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[github-actions[bot]]

任何人都可以处理此问题。 请务必在您的 pull request 中引用此问题。 :sparkles: 感谢你的贡献! :sparkles:

[github-actions[bot]]

♥️ 有劳 @LeeJim @amadeus711 尽快确认问题。 确认有效后将下一步计划和可能需要的时间回复给 @ouyangtsin 。

[PengYYYYY]

@ardor-zhang 处理中

[zhangpaopao0609]

问题定位

这个的具体原因我并未找到，但还是在这里做个简单的记录.

其中 li 上订阅了 onmouseenter onmouseleave，这里都是小写的。

// tdesign-vue-next/src/menu/submenu.tsx
 if (this.mode === 'popup') {
      events = {
        onmouseenter: this.handleMouseEnter,
        onmouseleave: this.handleMouseLeave,
      };
    }
    if (Object.keys(this.$slots).length > 0) {
      child = this.isHead ? this.renderHeadSubmenu() : this.renderSubmenu();
    }
    return (
      <li class={this.classes} {...events}>
        {child}
      </li>
    );

由于 jsx 的习惯，因此，我将这里的小写改成了大写，即 onMouseenter onMouseleave，问题便得到了解决

问题探究

一开始我以为是 jsx 编译的问题，于是查找了对应的编译库 "@vitejs/plugin-vue-jsx": "^1.3.3"，用 vite 进行了测试，发现大小写都是可行的，所以似乎可以排除 jsx 编译的问题。

后来我只好在 nuxt 编译后的结果中看，其中使用 vue 的 createVNode 进行最终的渲染，所以现在想来可能这里有些原因吧，但还未找到问题的所在，还需要再探索一下

  render: function render() {
   
    var events = {};

    if (this.mode === "popup") {
      events = {
        onmouseenter: this.handleMouseEnter,
        onmouseleave: this.handleMouseLeave
      };
    }
    
    return __vite_ssr_import_2__.createVNode("li", __vite_ssr_import_2__.mergeProps({
      "class": this.classes
    }, events), [child]);
  }

如何解决以及后续

解决办法就是将小写改成大写。 后续呢，如果能找到原因最好，要是找不到的话，就先挂着吧，看看是否会出现更底层的问题。

[zhangpaopao0609]

按照上述解决方案进行修改，需要对非 nuxt 场景下做测试。

如下，可以看到，修改为 onMouseenter onMouseleave 后 DOM 元素 li 正常的订阅了对应的事件，同时也触发了相应的弹窗，因此判定可行

[PengYYYYY]

0.20.0版本已修复