Element-plus Notification 自定义动态图标

需求

实现一个含有动态加载图标的通知，效果如下：

分析

官方默认的仅有4种图标（Success、Warning、Info、Error）：

显然这并不能满足我们的需求。
官方的API中icon可帮助我们实现：

但很重要的一点是，属性icon不能传入gif图片的路径，亲测无效，所以换一种思路，使用Component传入，然后在Component中放入img，其src使用我们gif图片的路径，这样就可以实现了。至于icon也可传入string情况下的string是什么，本人没测出来，有知道的大神可以在评论区交流！

实现

存放加载gif的Components：Loading.vue：

<template><img src="@/assets/loading/loading.gif" alt="">
</template><script setup lang='ts'>
</script><style lang='scss' scoped>
</style>

使用的Components：

import LoadingIcon from '@/components/LoadingIcon.vue'ElNotification({// @ts-ignoreicon: LoadingIcon,message: 'Is the login',duration: 0,
})

效果

Element-plus Notification 自定义动态图标相关推荐

Element UI 自定义动态换肤（主题）
需求背景:项目需要支持动态换主题,主题色可以随意选择(即用户想用什么颜色的主题就用什么颜色的主题):而element官网给的自定义主题只能是项目里写死,无法实现用户动态切换: 方式一:调接口加载C ...
Vue3 Element Plus 动态图标
Vue3 Element Plus 动态图标 Element Plus 中的图标以组件的形式来使用,而在基于Vue 2.x的Element UI中图标是字符串的形式,这样就导致过去的一些使用习惯不得不 ...
android自定义通知栏图标大小,Android不使用自定义布局情况下实现自定义通知栏图标的方法...
本文实例讲述了Android不使用自定义布局情况下实现自定义通知栏图标的方法.分享给大家供大家参考,具体如下: 自定义通知栏图标?不是很简单么.自定义布局都不在话下! 是的,有xml布局文件当然一切都 ...
MOGRT动态图标模板爱情元素手绘爱心特效pr视频模板
MOGRT动态图标模板爱情元素手绘爱心特效pr视频模板此模板包含16个惊人的手绘元素,你可以在你的下一个视频或照片中使用.这些元素是预先呈现的,可以在你的编辑软件中使用.通过使用alpha通道添加 ...
miui怎么用第三方图标包_MIUI上线全新动态图标主题，锁屏功能超级多且好用
喜欢用MIUI主题的米粉肯定知道,一款优秀的主题一定是好看.适配图标多.功能多且流畅,小编今天要给大家分享的这款主题就有这些特点. 首先我们来看看这款主题的锁屏.我们点击左下角按钮可以进入自定义界面, ...
android动态图标主题,【官方秘籍】MAML动态图标百变插件完美适配全机型教程
[官方秘籍]MAML动态图标&百变插件完美适配全机型教程发布时间: 2016-01-27 11:29 一份manifest文件,可以同时运行在多个设备,只需要设置好在不同尺寸或密度的设备上使 ...
openlayers6【十六】vue overlay类实现gif动态图标效果详解
文章目录 1. 写在前面 2. 效果图 3. 使用overlay类,地图添加动态图标 4. css设置gif图标 5. 完整代码 1. 写在前面 openlayer 里面支持 gif 图标上图的只有 ...
在notification显示音乐图标，设置图标背景的方法
1.在notification显示音乐图标代码如下: RemoteViews views = new RemoteViews(getPackageName(), R.layout.statusbar ...
通过iOS15 Communication Notifications实现自定义通知图标
通过iOS15 Communication Notifications实现自定义通知图标前言原理实现 MainTarget的配置 1.配置info.plist文件 2.配置Capability ...

Element-plus Notification 自定义动态图标

需求

分析

实现

效果

Element-plus Notification 自定义动态图标相关推荐

最新文章

热门文章