Loading 加载 - Vant 4

⏳ Loading 加载

🎯 介绍

Loading 组件就像是一个"时间魔法师" ✨！当用户需要等待数据加载或操作处理时，它会优雅地出现，用旋转的动画告诉用户"别着急，好东西正在路上"。无论是网络请求、文件上传还是复杂计算，Loading 都能让等待变得不再焦虑，反而充满期待！

📦 引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。

import { createApp } from'vue'; import { Loading } from'vant'; const app = createApp(); app.use(Loading);

🚀 代码演示

🎨 加载类型

通过 type 属性可以设置加载图标的类型，就像选择不同的"转圈舞步" 💃！默认为 circular（圆形旋转），可选值为 spinner（花瓣旋转）。每种类型都有自己独特的韵律和美感。

🌈 自定义颜色

通过 color 属性设置加载图标的颜色，让你的 Loading 拥有专属的"彩虹外衣" 🌈！

📏 自定义大小

通过 size 属性设置加载图标的大小，默认单位为 px。从迷你精致到霸气十足，尺寸由你决定！

💬 加载文案

可以使用默认插槽在图标的右侧插入加载文案，给用户一个贴心的"小纸条" 📝，告诉他们正在发生什么。

📱 垂直排列

设置 vertical 属性后，图标和文案会垂直排列，就像"上下铺"一样整齐有序！

🎨 自定义文案颜色

通过 color 或者 text-color 属性设置加载文案的颜色，让文字也能穿上漂亮的"彩色外套"！

🎭 自定义图标

通过 icon 插槽可以自定义加载图标，发挥你的创意，打造独一无二的加载动画！

API

Props

参数	说明	类型	默认值
color	颜色	string	#c9c9c9
type	类型，可选值为 spinner	string	circular
size	加载图标大小，默认单位为 px	*number	string*
text-size	文字大小，默认单位为 px	*number	string*
text-color	文字颜色	string	#c9c9c9
vertical	是否垂直排列图标和文字内容	boolean	false

Slots

名称	说明
default	加载文案
icon	自定义加载图标

类型定义

组件导出以下类型定义：

importtype { LoadingType, LoadingProps } from'vant';

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值	描述
--van-loading-text-color	var(--van-text-color-2)	-
--van-loading-text-font-size	var(--van-font-size-md)	-
--van-loading-spinner-color	var(--van-gray-5)	-
--van-loading-spinner-size	30px	-
--van-loading-spinner-duration	0.8s	-

📚 相关文档

🔄 状态反馈

• Toast 轻提示 - 轻提示组件，简短消息的优雅展示
• Dialog 弹出框 - 弹出框组件，重要信息的强调展示
• Notify 消息通知 - 消息通知组件，状态变化的及时反馈
• Skeleton 骨架屏 - 骨架屏组件，内容加载的优雅过渡

📋 列表相关

• List 列表 - 列表组件，无限滚动的完美搭档
• PullRefresh 下拉刷新 - 下拉刷新组件，数据更新的流畅体验
• SwipeCell 滑动单元格 - 滑动单元格组件，操作反馈的贴心提示

🎨 设计组件

• Empty 空状态 - 空状态组件，无数据时的友好提示
• ConfigProvider 全局配置 - 全局配置组件，统一管理主题样式
• Icon 图标 - 图标组件，丰富的视觉元素库

🚀 性能优化

• Lazyload 懒加载 - 懒加载组件，提升页面性能的神器
• ImagePreview 图片预览 - 图片预览组件，媒体加载的优化体验
• Image 图片 - 图片组件，智能加载的完美实现

🛠️ 开发指南

• Advanced Usage 进阶用法 - 进阶用法指南，组件实例方法详解