Loading 加载

用于在页面中展示加载动画，提示用户正在加载中。

参数

Props

名称	类型	默认值	描述
visible	boolean	false	是否显示加载状态
type	LoadingType	'spinner'	加载动画类型
icon	string | Component	-	自定义图标
iconStyle	XStyle	-	自定义图标样式
text	string	-	加载提示文本
mask	boolean	true	背景遮罩
fullscreen	boolean	false	全屏显示

Slots

名称	描述	参数
default	默认插槽，用于显示加载组件的内容	-
icon	自定义图标插槽	-

Events

名称	描述	参数
after-leave	加载组件离开过渡动画结束后触发	() => void

示例

基础用法

使用 visible 属性控制加载状态的显示和隐藏。

全屏 Loading

设置 fullscreen 属性可以全屏显示加载状态。

不同类型

Loading 组件提供了多种内置动画类型。

自定义文本

通过 text 属性可以添加加载提示文本。

自定义图标

通过 icon 属性或插槽可以自定义加载图标。

使用钩子方法

可以使用 useLoading 钩子函数以编程方式控制 Loading 状态。

指令用法

Loading 组件提供了 v-loading 指令，可以更简单地控制元素的加载状态。

基本用法

<div v-loading="true">内容区域</div>

配置选项

指令值可以是布尔值或数组，数组第一个元素为加载状态，第二个元素为配置选项。

<div v-loading="[true, { text: '加载中...', type: 'dots' }]">内容区域</div>

TypeScript

// 加载动画类型
export type LoadingType = "spinner" | "dots" | "snake" | "pulse" | "wave";

// 加载绑定值类型
export type LoadingBinding = boolean | [boolean, Partial<LoadingProps>];

// 加载属性接口
export interface LoadingProps {
  // 是否显示加载状态
  visible?: boolean;
  // 加载动画类型
  type?: LoadingType;
  // 自定义图标
  icon?: string | Component;
  // 自定义图标样式
  iconStyle?: XStyle;
  // 加载提示文本
  text?: string;
  // 背景遮罩
  mask?: boolean;
  // 全屏显示
  fullscreen?: boolean;
}