Element的MessageBox 弹框如何自定义图标

需求:修改弹框的小图标,如下是element自带
Element的MessageBox 弹框如何自定义图标_第1张图片
首先,复制一段element的官方代码作为演示




情况一:element中的Icon图标中有你想要的,那直接添加一个iconClass选项
Element的MessageBox 弹框如何自定义图标_第2张图片
在这里插入图片描述
Element的MessageBox 弹框如何自定义图标_第3张图片
如果想要修改图标为其他颜色,也很简单:


效果如下:
Element的MessageBox 弹框如何自定义图标_第4张图片
情况二:需要使用UI提供的svg小图标,例如我的svg图片如下
Element的MessageBox 弹框如何自定义图标_第5张图片
Element的MessageBox 弹框如何自定义图标_第6张图片
图片到手了就可以接下来的操作:
步骤一:登陆阿里妈妈图标库网站http://www.iconfont.cn
步骤二:注册账号并创建‘我的项目’
Element的MessageBox 弹框如何自定义图标_第7张图片
在这里插入图片描述
步骤三:创建好项目后,将你准备好的svg图片上传,上传好之后,项目中就会显示图片
Element的MessageBox 弹框如何自定义图标_第8张图片
步骤四:下载项目文件,解压,找到iconfont.css文件
Element的MessageBox 弹框如何自定义图标_第9张图片
Element的MessageBox 弹框如何自定义图标_第10张图片
步骤五:将iconfont.css文件放置你开发的项目中(public文件夹下),然后index.html引入资源
Element的MessageBox 弹框如何自定义图标_第11张图片
Element的MessageBox 弹框如何自定义图标_第12张图片


步骤六:打开iconfont.css可以看到两个类名,直接复制使用就可以了
Element的MessageBox 弹框如何自定义图标_第13张图片
修改好后效果如下,颜色修改同情况一:
Element的MessageBox 弹框如何自定义图标_第14张图片

你可能感兴趣的:(VUE)