开发环境

编辑器：VsCode
Vue：3.3.4
Sass：1.63.6
TypeScript：5.0.2
Element-Plus：2.3.7

效果预览

此处以登录认证通知为例

加载图标组件

我的组件路径：src > components > tools > Loading.vue

下面是完整代码：

<template>
    <div class="spinner"></div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
    name: 'Loading'
});
</script>

<style lang="scss" scoped>
.spinner {
    // 此处高宽可根据实际需求修改
    width: 24px;
    height: 24px;
    display: grid;
    // 高宽修改后，边框大小也要修改，否则动画会乱
    border: 3.5px solid #0000;
    border-radius: 50%;
    border-color: #dbdcef #0000;
    animation: spinner-e04l1k 1s infinite linear;
}

.spinner::before,
.spinner::after {
    content: '';
    grid-area: 1/1;
    margin: 2.2px;
    border: inherit;
    border-radius: 50%;
}

.spinner::before {
    border-color: #474bff #0000;
    animation: inherit;
    animation-duration: 0.5s;
    animation-direction: reverse;
}

.spinner::after {
    margin: 8.9px;
}

@keyframes spinner-e04l1k {
    100% {
        transform: rotate(1turn);
    }
}
</style>

更多精美免费Loading组件源码，可以看看这个网站：立即进入

在Notification组件中使用

• 1、依赖引入

// 引入ElNotification组件
import { ElNotification } from 'element-plus';
// 引入Loading组件，记得要配置“@”虚拟路径，否则就用相对路径
import Loading from '@/components/tools/Loading.vue';

• 2、使用自定义图标

ElNotification({
    title: '系统提示',
    message: '认证中...',
    icon: Loading // 指定Loading组件
});

官方文档中，是这样描述的：

这里我是使用组件类型(Component)，记住：设置了 type，再设置 icon 是不会生效的

结语

希望对你能有所帮助，有问题可以私信或下方留言给我