Element ui 全局修改loading图标样式

element ui文档中没有提供修改全局修改默认图标的办法，由于使用了太多的v-loading指令，需要直接修改他的默认样式。

修改后效果

通过重写ElLoading的方式实现，具体如下：

1、在plugins文件夹下新建wrapElLoading.ts文件

ts
import {ElLoading} from "element-plus";
 
/**
 * @description 扩展ElLoading,传入默认值
 */
export default {
    install(app: any) {
        const svg: string = `<path d="M21.38,4.58a4.62,4.62,0,0,0,9.24,0h0a4.62,4.62,0,0,0-9.24,0Z" fill="#9ab1c9"/><path d="M6.33,10.39a3.75,3.75,0,0,0,7.49,0h0a3.75,3.75,0,0,0-7.49,0Z" fill="#9ab1c9"/><path d="M0,25.86a3.43,3.43,0,0,0,6.86,0h0a3.41,3.41,0,0,0-3.43-3.4A3.41,3.41,0,0,0,0,25.85Z" fill="#9ab1c9"/><path d="M6.88,41.66a3.2,3.2,0,1,0,3.2-3.17A3.18,3.18,0,0,0,6.88,41.66Z" fill="#9ab1c9"/><path d="M23.32,47.35a2.68,2.68,0,0,0,5.36,0h0a2.68,2.68,0,0,0-5.36,0Z" fill="#9ab1c9"/><path d="M39.68,41.66a2.14,2.14,0,0,0,4.28,0h0a2.14,2.14,0,0,0-4.28,0Z" fill="#9ab1c9"/><path d="M46.85,26A1.58,1.58,0,0,0,50,26h0a1.58,1.58,0,0,0-3.15,0Z" fill="#9ab1c9"/><path d="M40.77,10.2a1.12,1.12,0,1,0,1.12-1.11A1.12,1.12,0,0,0,40.77,10.2Z" fill="#9ab1c9"/>`;
        const loadingDir: any = ElLoading.directive
        const originDirMounted = loadingDir.mounted;
        loadingDir.mounted = function (el: any, binding: any, vnode: any, prevVnode: any) {
            // 需要覆盖哪些默认属性值在这里设置，具体属性名参考官网loading指令用法
            el.setAttribute('element-loading-svg', svg)
            originDirMounted.call(this, el, binding, vnode, prevVnode)
        }
        const originService = ElLoading.service;
        ElLoading.service = function (options: any = {}) {
            return originService.call(this, Object.assign({ svg}, options))
        }
        app.config.globalProperties.$loading = ElLoading.service;
        // 如果在main.ts中全局使用了ElementPlus —> app.use(ElementPlus),则下面这行代码不需要
        // app.use(ElLoading);
    }
}

2、在main.ts中use即可

js
import WrapElLoading from "@/plugins/wrapElLoading";
 
// 若项目采用全局引入ElementPlus，则须在app.use(ElementPlus)后执行
app.use(WrapElLoading);

目录

修改后效果