SSpinner <s-spinner>

表示内容或操作正在加载的动画指示器。 SSpinner 是 Shopify Polaris <s-spinner> web component 的带类型 Vue 3 wrapper。

import { SSpinner } from 'polaris-vue-elements'

最佳实践

• 用于较慢的异步操作。 当保存表单、获取数据或处理操作等耗时超过约 500ms 时，使用 spinner。对于瞬间完成的操作，spinner 只会一闪而过，分散注意力。
• 局限于正在加载的部分。 将 spinner 放在页面中正在加载的部分，例如正在保存的按钮或正在获取数据的 section，而不是阻塞整个界面。
• 说明正在加载的内容。 始终设置 accessibilityLabel，例如“正在加载产品”或“正在保存更改”，让屏幕阅读器用户知道正在发生什么。
• 事后报告结果。 spinner 消失后，显示清晰的成功或错误消息，让商家知道操作已完成以及结果如何。

<SSpinner accessibilityLabel="Loading products" />

参阅 Shopify 关于 <s-spinner> 的最佳实践（英文）以获取完整指南。

示例

<script setup>
import { SSpinner } from 'polaris-vue-elements'
</script>

<template>
  <SSpinner accessibilityLabel="Loading, small" size="base" />
  <SSpinner accessibilityLabel="Loading, large" size="large" />
  <SSpinner accessibilityLabel="Loading, extra large" size="large-100" />
</template>

Props

Prop	类型	说明
accessibilityLabel	string	为屏幕阅读器等辅助技术描述组件用途或内容的标签。当仅凭可见内容无法清楚传达组件用途时，可用它提供额外的上下文。
size	"base" | "large" | "large-100"	加载指示器的尺寸。 - base：适合内联加载指示器或标准 UI 上下文的默认尺寸。 - large：较大的指示器，用于更突出的加载状态。 - large-100：特大指示器，用于整页或需要强调的加载状态。