需求
实现一个含有动态加载图标的通知,效果如下:
分析
官方默认的仅有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-ignore
icon: LoadingIcon,
message: 'Is the login',
duration: 0,
})
效果