当前位置：首页 > news >正文

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

news 来源：原创 2025/6/16 8:05:50

一、标题样式

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() {},
});