指南

界面组件

界面组件是当第三方脚本加载后会被替换的伪 UI 元素。

Nuxt 脚本提供了几个你可以用来加速应用程序性能的界面组件。

使用它们存在权衡，但它们可以帮助改善应用程序的性能体验。

什么是界面组件？

要使用像视频嵌入、支付模态或聊天小部件这样的第三方脚本渲染复杂组件，我们需要很多资源。在 Nuxt 启动时加载这些资源会降低应用程序的性能。

但是，如果我们延迟加载脚本，直到 Nuxt 完成，最终会导致有害的内容布局偏移 (CLS) 和视觉噪音，从而导致糟糕的用户体验。

界面组件旨在通过渲染一个“伪”UI 元素来解决这个问题，该元素在第三方脚本加载后会被替换。

通过挂接到适当的 DOM 事件并提供用户反馈，我们可以在使用这些伪元素的同时仍然提供良好的用户体验。

使用界面组件的权衡是什么？

虽然性能优势非常明显，但用户体验可能会有权衡。

  • 内容不匹配闪烁：伪 UI 元素可能不像最终的 UI 元素那样，导致内容不匹配闪烁。Nuxt 脚本只提供最少的样式，你可能需要调整它以匹配应用程序的设计。
  • 交互性可能会中断：元素的交互性需要脚本加载，如果脚本没有加载，则需要提供一个回退。
  • 可访问性问题：当脚本正在加载或加载失败时，我们需要向用户提供清晰的 a11y 反馈。

Nuxt 脚本界面组件

所有界面组件都是无头组件，它们包装相关的 useScript<provider> 可组合函数。文档中提供了最少的样式，为起点提供参考。

使用界面组件的最佳实践

提供错误回退

如果脚本加载失败，请提供一个回退，通知用户故障并提供访问内容的替代方法。

<ScriptYouTubePlayer>
  <template #error>
    <UAlert color="red" title="YouTube player failed to load" description="Please refresh the page to try again." />
  </template>
</ScriptYouTubePlayer>

提供具有可访问反馈的加载状态

当脚本正在加载时，请提供一个加载状态，通知用户内容正在加载。

Nuxt 脚本提供了 ScriptLoadingIndicator 组件，可以帮助完成此操作并提供 a11y 反馈。

<ScriptYouTubePlayer>
  <template #loading>
  <ScriptLoadingIndicator />
  </template>
</ScriptYouTubePlayer>

明智地选择触发事件

界面组件预先配置为提供最佳的整体性能，但你可以自定义触发事件以更好地匹配应用程序的需求。

最佳触发器是需要明确的用户交互的触发器，例如点击。悬停时加载可能会导致用户体验问题，导致后续事件丢失，例如点击。

界面组件 API

所有界面组件都共享相似的 API。

属性

插槽

默认情况下，该组件提供最少的 UI，仅足以实现功能和可访问性。有许多插槽供你根据需要自定义组件。

  • default - 始终与组件一起显示的内容。
<template>
  <ScriptYouTubePlayer>
    <div class="bg-blue-500 text-white p-5">
      Youtube!
    </div>
  </ScriptYouTubePlayer>
</template>
  • loading - 仅在脚本加载时显示的内容。
<template>
  <ScriptYouTubePlayer>
    <template #loading>
      <ScriptLoadingIndicator />
    </template>
  </ScriptYouTubePlayer>
</template>
  • awaitingLoad - 仅在脚本等待加载时显示的内容。
<template>
  <ScriptYouTubePlayer>
    <template #awaitingLoad>
    <div class="bg-blue-500 text-white p-5">
      Click to play!
    </div>
    </template>
  </ScriptYouTubePlayer>
</template>
  • error - 如果脚本加载失败，将显示的内容。
<template>
  <ScriptYouTubePlayer>
    <template #error>
      <UAlert color="red" title="YouTube player failed to load" description="Please refresh the page to try again." />
    </template>
  </ScriptYouTubePlayer>
</template>

事件

  • ready - 脚本加载后发出。使你能够访问底层脚本 API。
  • error - 脚本加载失败时发出。

全局脚本

加载全局第三方脚本并针对你的 Nuxt 应用程序优化它们。

useScript

useScript 函数的 API 文档。