ant design modal自定义footer - vue

iShot_2023-10-31_20.50.00.png

文档中都是a-modal另起一个dom，这里希望是自定义的confirm，并且有多个按钮

XML/HTML Code复制内容到剪贴板

<a-button type="primary" size="small" @click.stop="shujuquanxianOnChange(record)">仅自己</a-button>

JavaScript Code复制内容到剪贴板

<script setup>
import { createVNode, ref } from 'vue'
import { Modal } from 'ant-design-vue'
const shujuquanxianOnChange = (record) => {
Modal.confirm({
title: '提示',
// icon: createVNode(ExclamationCircleOutlined),
content: '确定要开启【' + record.title + '】岗位人员的数据查看权限？',
footer: () => {
return createVNode('div', {
class: 'base-flex base-rows base-align-items-center base-justify-content-end base-mt20'
},[
createVNode('button', {
class: 'default-btn primary',
onClick:(e) => {
onChangeStatus(record, 1)
}
},'所有部门'),
createVNode('button', {
class: 'default-btn base-ml15 base-mr15',
onClick:(e) => {
onChangeStatus(record, 2)
}
},'本部门'),
createVNode('button', {
class: 'default-btn',
onClick:(e) => {
onChangeStatus(record, 3)
}
},'仅自己'),
])
},
});
}
// 修改状态
const onChangeStatus = (record, status) => {
console.log(record, status)
}