加载 Spin
正在加载...
基础使用
用 Spin 组件包裹要加载的内容。loading
属性设置加载状态。
Good programmers are always learning. They read books, attend conferences, and talk to others. They experiment with new languages and tools, constantly trying to write better code. Studying classic problems teaches how to break them down and balance trade-offs—time versus space, simplicity versus efficiency. Reading others' code reveals structure, naming, and commenting habits. Learning never stops; every line is a chance to improve.
<template>
<px-spin loading>
Good programmers are always learning. They read books, attend conferences, and talk to
others. They experiment with new languages and tools, constantly trying to write better
code. Studying classic problems teaches how to break them down and balance trade-offs—time
versus space, simplicity versus efficiency. Reading others' code reveals structure, naming,
and commenting habits. Learning never stops; every line is a chance to improve.
</px-spin>
</template>
单独使用
单独使用时仅展示加载图标。
<template>
<px-spin> </px-spin>
</template>
图标尺寸
图标有不同尺寸。
<template>
<px-space>
<px-spin :size="12"></px-spin>
<px-spin size="small"></px-spin>
<px-spin></px-spin>
<px-spin size="large"></px-spin>
<px-spin :size="44"></px-spin>
</px-space>
</template>
换个图标
icon
插槽修改图标。
<template>
<px-spin>
<template #icon>
<px-icon spin><IconSpinner></IconSpinner></px-icon>
</template>
</px-spin>
</template>
<script setup lang="ts">
import { IconSpinner } from '@pixelium/web-vue/icon-hn/es'
</script>
添加描述
使用 description
插槽,你也可以添加加载中的描述。
The most important part of writing a program is not deciding what data structures to use or what algorithms to implement. It is understanding the problem. Once you really understand the problem, the right data structures and algorithms often become obvious. The hard part is getting to that point—seeing past the surface and figuring out what the program really needs to do.
Coming Soooooooooooon...
<template>
<px-spin loading>
The most important part of writing a program is not deciding what data structures to use or
what algorithms to implement. It is understanding the problem. Once you really understand
the problem, the right data structures and algorithms often become obvious. The hard part is
getting to that point—seeing past the surface and figuring out what the program really needs
to do.
<template #description> Coming Soooooooooooon... </template>
</px-spin>
</template>
API
SpinProps
属性 | 类型 | 可选 | 默认值 | 描述 | 版本 |
---|---|---|---|---|---|
loading | boolean | 是 |
| 加载状态,单独使用 Spin 时默认 true ,包裹内容时默认 false 。 | 0.0.2 |
size | 'medium' | 'large' | 'small' | number | 是 | 'medium' | 图标尺寸。 | 0.0.2 |
maskColor | string | 是 |
| 遮罩层 Mask 组件颜色。 | 0.0.2 |
maskStep | number | 是 | 1 | 遮罩层 Mask 组件网格间隔。 | 0.0.2 |
maskLineWidth | number | 是 | 2 | 遮罩层 Mask 组件线条尺寸。 | 0.0.2 |
maskGrid | boolean | 是 | true | 遮罩层 Mask 组件是否为网格背景。 | 0.0.2 |
zIndex | number | 是 | 20 | 包裹内容时,加载状态呈现的覆盖层的 z-index 。 | 0.0.2 |
SpinSlots
插槽 | 参数 | 描述 | 版本 |
---|---|---|---|
default |
| Spin 包裹的内容。 | 0.0.2 |
icon |
| Spin 的图标。 | 0.0.2 |
description |
| Spin 加载时的描述。 | 0.0.2 |