Ant Design Vue 中 message组件自定义图标及修改样式方法

一、安装 Ant Design Vue

首先安装 Ant Design Vue，
具体安装步骤可以查阅官网文档：

https://www.antdv.com/docs/vue/introduce-cn

二、 message 组件使用方法

在要使用的组件中引入 message 组件：

import { message } from 'ant-design-vue'

然后在 script 中调用 message 方法。例如：

message.info('This is a normal message');

message.success('This is a success message');

message.error('This is an error message');

message.warning('This is a warning message');

三、自定义提示图标及消息样式方法

自定义图标：

配置 message 组件调用函数的 icon 属性：

// 1、引入 h 函数
import { h } from 'vue'

// 2、配置 message 的 icon 属性
message.success({
  content: '消息内容',
  icon: h('img', { src: '/src/assets/image/***.png'})
})

此处有尝试使用 src: @/assets/image/**.png 格式地址，但是图片配置不生效，尝试使用 上面的图片地址格式可以出来自己配置的图片，使用线上图片地址也可以（http://…/***.png）。

h函数配置图片地址本地生效，但打包上线后图片无法显示解决方法

h() 函数中配置图片地址： ‘/src/assets/image/***.png’ 这种格式图片本地可以显示，但是打包上线后图片无法显示，报错图片地址错误。

解决办法：

① 使用 import 先引入图片地址
② 再使用 引入图片的变量名

如果图片在 src/assets/image 文件夹下~
代码示例:

import successImg from '@/assets/image/icon-success.svg'
// import successImg from '../assets/image/icon-success.svg'  这种写法也可以

message.success({
    content: '复制成功！',
    icon: h('img', { src: successImg })
})

vite 官网文档 静态资源引用说明地址：https://cn.vitejs.dev/guide/assets
可以查询官网文档了解原理和更多操作方法~

修改样式

在 main.css 中 添加样式 ，设置自己想要修改成的背景色和字体颜色；如果换成了自定义图标，默认状态下图片没有和文字垂直居中对齐，需要处理一下。

代码示例：

// 设置消息提示框背景色及字体颜色
.ant-message-notice .ant-message-notice-content {
  background: #5F6DFF;
  color: rgba(255,255,255,0.9);
}

// 图片文字居中处理
.ant-message-custom-content.ant-message-success {
  display: flex;
  align-items: center;
  gap: 4px;
}

根据需要可以在合适的文件中添加样式配置