Loading 加载
加载图标，用于表示加载中的过渡状态。
基础用法
文案用法
自定义图标
指令-区域加载
使用指令方法，组件需要全局注册
js
import { createApp } from 'vue'
import { loadingDirective } from 'ryxon'
const app = createApp()
app.directive('loading', loadingDirective)指令-自定义加载中组件内容
指令-让加载组件铺满整个屏幕
以服务的方式来调用
API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| color | 颜色 | string | #c9c9c9 |
| type | 类型，可选值为 spinner | string | circular |
| size | 加载图标大小，默认单位为 px | number | string | 30px |
| text-size | 文字大小，默认单位为 px | number | string | 14px |
| text-color | 文字颜色 | string | #c9c9c9 |
| vertical | 是否垂直排列图标和文字内容 | boolean | false |
Slots
| 名称 | 说明 |
|---|---|
| default | 加载文案 |
| icon | 自定义加载图标 |
指令
| 名称 | 说明 | 类型 |
|---|---|---|
| v-loading | 是否显示动画 | boolean |
| element-loading-text | 显示在加载图标下方的加载文案 | string |
| element-loading-spinner | 自定义加载图标 | string |
| element-loading-background | 背景遮罩的颜色 | string |
| element-loading-custom-class | 自定义类名 | string |
| element-loading-color | 颜色 | string |
| element-loading-type | 类型 ，可选值 spinner、circular | string |
| element-loading-size | 加载图标大小 | string |
| element-loading-text-size | 文字大小 | string |
| element-loading-text-color | 文字颜色 | string |
| element-loading-vertical | 是否垂直排列图标和文字内容，可选值 true、false | string |
Loading Options 配置项
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| target | Loading 需要覆盖的 DOM 节点。 可传入一个 DOM 对象或字符串； 若传入字符串，则会将其作为参数传入 document.querySelector 以获取到对应 DOM 节点 | object/string | - | body |
| body | 同 v-loading 指令中的 body 修饰符 | boolean | - | false |
| fullscreen | 同 v-loading 指令中的 fullscreen 修饰符 | boolean | - | true |
| lock | 同 v-loading 指令中的 lock 修饰符 | boolean | - | false |
| text | 显示在加载图标下方的加载文案 | string | - | - |
| spinner | 自定义加载图标 | string / Component | - | - |
| background | 遮罩背景色 | string | - | - |
| custom-class | Loading 的自定义类名 | string | - | - |
| color | 颜色 | string | - | #0094ff |
| type | 类型 | string | spinner/circular | circular |
| size | 加载图标大小，默认单位为 px | number | string | - | 30px |
| text-size | 文字大小，默认单位为 px | number | string | - | 14px |
| text-color | 文字颜色 | string | - | #0094ff |
| vertical | 是否垂直排列图标和文字内容 | boolean | - | false |
类型定义
组件导出以下类型定义：
ts
import type { LoadingType, LoadingProps } from 'ryxon'主题定制
样式变量
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
| 名称 | 默认值 | 描述 |
|---|---|---|
| --r-loading-text-color | var(--r-text-color-2) | - |
| --r-loading-text-font-size | var(--r-font-size-md) | - |
| --r-loading-spinner-color | var(--r-gray-5) | - |
| --r-loading-spinner-size | 30px | - |
| --r-loading-spinner-duration | 0.8s | - |