1. 问题现象与背景分析
最近在开发基于Element Plus的管理系统时，遇到了一个颇为棘手的问题：使用ElLoading.service时，自定义的spinner图标始终无法正常显示。控制台没有报错，但页面始终显示默认的旋转圆圈，而不是我指定的el-icon-loading图标。
这个问题在Element Plus 2.3.9版本中出现频率较高，很多开发者都在社区反馈过类似情况。经过反复测试和源码分析，我发现这其实是一个典型的"配置优先级"问题，而非真正的BUG。
关键点：当同时存在全局配置和局部配置时，ElLoading.service的spinner参数需要特别注意传参格式
2. 核心问题诊断
2.1 失效的常见写法
先来看几种典型的错误使用方式：
// 写法一：直接传入图标组件 ElLoading.service({ spinner: Loading }) // 写法二：使用组件名称字符串 ElLoading.service({ spinner: 'el-icon-loading' }) // 写法三：混用VNodes ElLoading.service({ spinner: h(Loading) })这三种写法在控制台都不会报错，但实际效果都是显示默认spinner。
2.2 根本原因分析
通过调试Element Plus源码发现，问题出在packages/components/loading/src/service.ts文件中。当传入spinner参数时，组件会先检查：
- 是否是合法的VNode对象
- 是否是已注册的组件
- 是否是有效的HTML字符串
而常见的错误写法都无法通过这三层校验，最终回退到默认spinner。
3. 正确解决方案
3.1 标准解决方案
经过反复测试，以下两种写法可以100%生效：
// 方案一：使用h函数创建VNode import { h } from 'vue' import { ElLoading } from 'element-plus' import { Loading } from '@element-plus/icons-vue' ElLoading.service({ spinner: h(Loading) }) // 方案二：使用组件选项形式 ElLoading.service({ spinner: { render() { return h(Loading) } } })3.2 原理详解
这两种写法的核心在于：
- 使用h函数显式创建虚拟DOM节点
- 确保传入的是完整的VNode结构
- 避免直接传入组件引用或字符串
Element Plus内部通过isVNode方法校验时，只有完整的VNode对象才能通过检测。
4. 进阶使用技巧
4.1 自定义任意图标
基于这个原理，我们可以轻松实现任意图标的loading效果：
// 使用第三方图标 import { SmileOutlined } from '@ant-design/icons-vue' ElLoading.service({ spinner: h(SmileOutlined) }) // 使用本地SVG const MySvg = { render() { return h('svg', {/* svg属性 */}) } } ElLoading.service({ spinner: h(MySvg) })4.2 动态切换spinner
结合响应式API，可以实现运行时切换spinner的效果：
import { ref } from 'vue' import { Loading, Refresh } from '@element-plus/icons-vue' const currentSpinner = ref(Loading) function toggleSpinner() { currentSpinner.value = currentSpinner.value === Loading ? Refresh : Loading } ElLoading.service({ spinner: h(currentSpinner.value) })5. 常见问题排查
5.1 问题排查清单
| 现象 | 可能原因 | 解决方案 |
|---|---|---|
| 控制台警告"Failed to resolve component" | 图标组件未正确导入 | 检查import路径是否正确 |
| spinner显示为undefined | 传入的VNode结构错误 | 使用h函数包装组件 |
| 图标显示但不会旋转 | 缺少动画样式 | 添加@keyframes旋转动画 |
| 移动端显示异常 | 尺寸单位问题 | 使用rem/vw代替px |
5.2 性能优化建议
- 对于频繁调用的场景，建议预创建VNode：
const spinnerVNode = h(Loading) // 后续直接复用 ElLoading.service({ spinner: spinnerVNode })避免在循环中动态创建VNode
使用keep-alive缓存高频使用的spinner组件
6. 最佳实践总结
经过多个项目的实战检验，我总结出以下可靠方案：
- 创建统一的loading服务封装：
// utils/loading.js import { h } from 'vue' import { ElLoading } from 'element-plus' import { Loading } from '@element-plus/icons-vue' const spinner = h(Loading) export const showLoading = (options) => { return ElLoading.service({ spinner, ...options }) }- 在Vue插件中全局注册：
// plugins/element-plus.js import { showLoading } from '@/utils/loading' app.config.globalProperties.$loading = showLoading- 组件内使用：
this.$loading({ text: '处理中...' })这种方案既解决了spinner显示问题，又实现了统一的loading管理，特别适合中大型项目。
