Vant 1 作为 Vue 2 移动端组件库，加载反馈并不只是一个静态图标。它至少包含 van-loading 组件、v-loading 指令和 Toast.loading 全局方法三种形态。三者都能表达“正在加载”，但使用场景和关闭机制差别很大。混用或只凭感觉选择，很容易出现遮罩不消失、按钮重复提交、层级错乱等问题。这篇文章会把基础用法、选择逻辑和常见坑点放在一起说明，并给出可直接维护的封装代码。
一、先分清 Vant 1 里的三类 Loading 能力
van-loading 是最基础的加载图标组件，适合内嵌在按钮、列表底部或某个局部区域。它不会自动遮挡父容器，只负责展示动画和可选文字。常用属性包括 type、color、size、vertical 等。其中 type 为 circular 是圆形转圈，spinner 是旋转点状，具体视觉效果受 Vant 版本和主题影响。
下面的示例展示了最简单的内联用法：
<template>
<div class="demo">
<van-loading />
<van-loading type="spinner" color="#1989fa" />
<van-loading size="24px" vertical>加载中...</van-loading>
</div>
</template>
v-loading 指令会动态插入一个包含透明遮罩和居中加载图标的层，通常配合布尔值控制显隐。这个指令适合给某个列表容器、表单区域提供局部加载遮罩。需要特别留意的是，指令生成的遮罩使用绝对定位，所以目标元素最好显式设置 position: relative，否则遮罩可能相对更外层的定位父元素展开，覆盖到意外区域。
Toast.loading 是全局轻提示，调用后会弹出一个居中的加载层，常用于请求期间阻止整个页面交互。它的默认 duration 不是零，如果只调用一次不传参可能几秒后自动关闭，但大多数请求场景会传入 duration: 0 表示持续展示，然后手动调用 Toast.clear() 关闭。
import { Loading, Toast } from 'vant';
Vue.use(Loading);
Vue.use(Toast);
Toast.loading({
message: '加载中...',
forbidClick: true,
duration: 0
});
// 请求结束必须调用，否则遮罩不会关闭
Toast.clear();
二、不同场景怎么选：按钮、区域、全局
如果只是按钮在提交时需要显示一个转圈同时保留按钮文字，使用 van-loading 组件最轻量，不会创建额外遮罩，也不会阻止用户点击其他区域。可以配合 loading 状态变量切换按钮文字和禁用状态。这种场景下如果使用 Toast，会显得过重，而且用户无法继续操作同页面的其他模块。
如果请求对应的是某个列表或卡片区域，希望加载时不允许操作该区域，用 v-loading 指令更合适。典型做法是给容器绑定 v-loading="listLoading"，再给容器设置相对定位。指令会根据绑定值自动挂载或移除遮罩，无需手写关闭逻辑，但绑定的状态变化必须被可靠触发。
<template>
<div v-loading="listLoading" class="list-wrap">
<van-cell-group>
<van-cell title="列表项" />
</van-cell-group>
</div>
</template>
<style>
.list-wrap {
position: relative;
min-height: 120px;
}
</style>
如果是整页级请求锁，比如登录、支付、订单提交，不希望用户重复点击或返回，建议使用 Toast.loading 并设置 forbidClick: true。它的优势是挂载在 body 级别，天然覆盖页面所有可点区域。缺点是必须管理关闭时机，多个请求同时进行时尤其容易踩坑。
三、容易踩的坑与处理建议
第一个坑是容器没有定位。v-loading 的遮罩元素基于目标元素定位，如果元素没有 relative、absolute 或 fixed，遮罩会向上找到最近的定位祖先。解决方法是给绑定指令的元素加上 position: relative，并配合 min-height 避免空列表时遮罩高度为 0。否则可能出现遮罩盖住整个页面，或者只显示一条细线的情况。
第二个坑是 Toast.loading 没有单例保护。多个请求同时发出时，如果每个请求都创建 Toast，结束一个就调用 Toast.clear()，会把其他请求的加载提示一并清掉。如果完全不清理，又会出现 Toast 重叠。推荐用请求计数器统一管理，确保最后一个请求结束后才清理。
let requestCount = 0;
function showLoading() {
if (requestCount === 0) {
Toast.loading({
message: '加载中...',
forbidClick: true,
duration: 0
});
}
requestCount = requestCount + 1;
}
function hideLoading() {
if (requestCount > 0) {
requestCount = requestCount - 1;
}
if (requestCount === 0) {
Toast.clear();
}
}
第三个坑是错误路径没有关闭。请求失败或业务异常时，如果只在成功回调里关闭 loading，页面会被永久遮罩。应该使用 Promise 的 finally，或者在 axios 拦截器里统一处理关闭。值得注意的是，Vant 1 基于 Vue 2，如果项目正在用 Vue 3，则不能直接安装 Vant 1，需要升级到对应的大版本，否则会出现组件无法渲染或指令失效的问题。
第四个坑是按需引入。全量引入 Vant 会让移动端首屏体积增大不少。Vant 1 通常配合 babel-plugin-import 做按需加载，项目里只引入需要的 Loading 和 Toast 即可。避免直接复制其它项目的 webpack 配置而不检查插件版本和样式文件路径，那样容易出现样式丢失或组件加载出来没有样式。
四、一个更稳妥的封装思路
在真实项目里不建议在页面中散落多个 Toast.loading 调用。可以基于请求拦截器封装一个带计数的 loading 服务，或者使用一个全局 mixin 控制整页遮罩。核心原则是：开始请求时只显示一次，结束请求时按计数归零再关闭。这样既能避免 Toast 重叠，也能防止过早关闭导致页面在后续请求中失去保护。
如果区域遮罩较多，可以将 v-loading 指令绑定到一个统一的状态对象，而不是在每个组件里单独声明多个 loading 变量。这样能减少漏改和重复维护。对于按钮级 loading，尽量在提交函数里用 try/finally 包裹，确保无论成功失败都能复位按钮状态，防止用户重复点击。
此外，加载状态不要只依赖视觉提示。如果网络慢或动画不明显，可以配合文字说明当前操作，例如“正在提交订单”。移动端网络环境复杂，按钮的防重复提交要和 loading 状态绑定，不能只用 setTimeout 简单节流，否则弱网下仍可能产生重复请求。
Vant 1 的 loading 能力本身不复杂，难点在于选择合适的层级和可靠的关闭时机。把 component、directive、Toast 三者区分清楚，再结合请求计数器或拦截器统一管理，就能避免大部分移动端加载交互问题。
Vant 1 Loading加载组件避坑建议修改时间：2026-10-07 02:10:09