【antd + vue】Modal 对话框：修改弹窗标题样式、Modal.confirm自定义使用

一、标题样式

1、目标样式：修改弹窗标题样式

2、问题：

直接在对应css文件中修改样式不生效。

3、原因分析：

可能原因：

选择器权重不够，把在控制台找到的选择器直接复制下来，如果还不够就再加，还有注意不要写在带 scope 属性的样式表里。

4、解决办法：

// 第一步：添加容器类名
const delModal = (id, userName) => {Modal.confirm({class: "del-user-modal",title: () => ` ${userName} `,icon: () => createVNode(ExclamationCircleOutlined),okText: "确定",cancelText: "取消",closable: true,centered: true,onOk() {delUser(id);},onCancel() {},});
};// 第二步：在公共样式文件中添加样式（common.css）/* 用户管理-删除弹框-标题样式 */
.del-user-modal .ant-modal-confirm-title{color: #477EED;
}.del-user-modal .ant-modal-confirm-title::before {display: inline-block;content: "是否确定删除";color: rgba(0,0,0,0.80);
}.del-user-modal .ant-modal-confirm-title::after {display: inline-block;content: "用户";color: rgba(0,0,0,0.80);
}

 

二、Modal.confirm —— okButtonProps

参考链接： 

antd使用：在一个Modal中使用同个form表单实现编辑和新增功能_modal 配合 可编辑表格-CSDN博客

 

三、Modal.confirm —— content

1、使用说明：

createVNode(‘参数1’， ’参数2‘，’参数3‘)

参数1：type，就是html标签

参数2：props， 属性

参数3: 渲染的内容，如果要嵌套的话就是一个 [ ]

2、代码示例

Modal.confirm({title: () => `删除班级`,icon: () => createVNode(ExclamationCircleOutlined),okText: "确定",cancelText: "取消",closable: true,centered: true,content: () =>createVNode("div", { style: "color:rgba(0,0,0,0.40)" }, [`该班级下绑定有`,createVNode("span",{ style: "color: #4070FF" },` ${parm.stuNumber} `),`名学生、`,createVNode("span", { style: "color: #4070FF" }, ` ${teaNum} `),`位任课老师，删除后关联关系将一并删除，无法恢复，确认删除？`,]),onOk() {delClass(parm.id);},onCancel() {},
});