[Tabs] Tabs 选项卡在nuxt3 ssr应用中报window is not defined

[ouyangtsin]

trafficstars

tdesign-vue-next 版本

0.18

重现链接

No response

重现步骤

Tabs 选项卡在nuxt3 ssr应用中报window is not defined

期望结果

No response

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[github-actions[bot]]

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

[github-actions[bot]]

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

[PengYYYYY]

@ardor-zhang 处理中

[zhangpaopao0609]

造成原因

tabs 在 setup 期间使用了

useResize(xxx);

也就是如下代码，可以看到，下面的 if (!window.ResizeObserver || !observer) return; 中的 window 在 ssr 时是不存在的，所以造成了错误

export function useResize(listener: () => void, observer?: HTMLElement) {
  useListener('resize', listener);

  if (!window.ResizeObserver || !observer) return;
  const resizeObserver = new window.ResizeObserver(listener);
  resizeObserver.observe(observer);

  onBeforeUnmount(() => {
    resizeObserver.disconnect();
  });
}

如何解决 从 useResize 的功能来看，主要两点

• useListener('resize', listener)，用于 window resize 事件监听，是在 onMounted 后触发的，因此这里不需要关心
• ResizeObserver，同样用于 window resize 事件监听，但是这里是在 setup 期间触发的，但实际上没有必要在 setup 期间触发，而同样可以在 onMounted 后再触发，就可以解决 window 问题

计划解决如下

export function useResize(listener: () => void, observer?: HTMLElement) {
  useListener('resize', listener);

  let resizeObserver: ResizeObserver  = null;

  onMounted(() => {
    if (!window.ResizeObserver || !observer) return;
    resizeObserver = new window.ResizeObserver(listener);
    resizeObserver.observe(observer);
  });

  onBeforeUnmount(() => {
    resizeObserver?.disconnect();
  });
}

[PengYYYYY]

0.20.0版本已修复