加载中 Spin

用于页面或区块的加载中状态展示，支持独立使用和包裹内容两种模式。

基础用法

独立使用 Spin 组件展示加载状态，可通过 description 属性添加加载描述文本。

加载中...

<template>
  <bp-space :size="32">
    <bp-spin />
    <bp-spin description="加载中..." />
  </bp-space>
</template>

包裹内容

将内容作为默认插槽传入，Spin 会在内容上方显示加载遮罩。通过 spinning 属性控制加载状态。

数据加载中...

这里是一些内容区域

Spin 组件会在此内容上方显示加载遮罩

点击上方按钮切换加载状态

<template>
  <div>
    <bp-space :size="16" style="margin-bottom: 16px">
      <bp-button @click="loading = !loading">切换加载状态</bp-button>
    </bp-space>
    <bp-spin :spinning="loading" description="数据加载中...">
      <div class="content-box">
        <p>这里是一些内容区域</p>
        <p>Spin 组件会在此内容上方显示加载遮罩</p>
        <p>点击上方按钮切换加载状态</p>
      </div>
    </bp-spin>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const loading = ref(true);
</script>

<style lang="scss" scoped>
.content-box {
  padding: 24px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;

  p {
    margin: 0;
    line-height: 2;
    font-size: 13px;
    color: #595959;
  }
}
</style>

Spin 属性

spinning	是否为加载中状态	Boolean	true	-
spin-icon	加载图标，1-5 为内置图标，也可传入自定义组件	NumberComponent	1	-
description	加载描述文本	String	-	-

Spin 插槽

default

被包裹的内容，传入后 Spin 以遮罩形式覆盖

-

-