antdv 自定义Modal.confirm图标

在 Ant Design Vue 中，要同时实现红色警告图标和取消按钮，可以使用 Modal.confirm并自定义图标。以下是解决方案：

import { Modal } from 'ant-design-vue';
import { ExclamationCircleFilled } from '@ant-design/icons-vue';

Modal.confirm({
  title: '确定要关闭应用吗？',
  content: '删除后将无法恢复，请谨慎操作。',
  okText: '确定',
  cancelText: '取消',
  okType: 'danger',  // 设置确定按钮为红色
  icon: () => <ExclamationCircleFilled style={{ color: '#ff4d4f' }} />, // 红色警告图标
  onOk() {
    console.log('⚠️:[ app ]🎈：', app);
  },
});

关键点说明：

1. ​**使用 Modal.confirm**​：支持取消按钮（Modal.error默认没有取消按钮）

2. ​自定义红色图标​：

   • 导入 ExclamationCircleFilled警告图标
   • 通过 icon属性渲染图标并设置红色样式

3. ​按钮样式​：

   • okType: 'danger'使确定按钮显示为红色
   • cancelText自定义取消按钮文本

效果：

• 红色警告图标 ✅
• 确定按钮（红色）✅
• 取消按钮 ✅
• 标题和内容 ✅
• 点击确定触发 onOk✅

注意：在 Vue 3 中需确保环境支持 JSX，或使用 h()函数创建虚拟节点。如果是 Vue 2 项目，请使用 createElement方式。