Vue3与Ant-Design-Vue的Modal弹窗控制底部footer自定义

一开始使用提示弹窗，都是直接调用的方法，使用 confirm() 、快捷地弹出确认框。

import {Modal} from "ant-design-vue";		//引入资源

//调用Modal的对话框
function showDialog(){
	Modal.confirm({
   		title: "提示",
   		content: "确定删除？",
   		okText: "确认",
   		okType: "danger",
   		cancelText: "取消",
   		onOk() {
   			//请求操作
   		},
 	});
}

效果如下，但是有时候如果我们需要自定义底部的按钮，比如调整底部的按钮顺序或者个数。又该如何操作呢？

 <!-- 弹窗 -->
  <a-modal 	title="提示"
    		width="500px"
  			v-model:visible="editModal.visible" 
  			v-model:confirmLoading="editModal.loading">  
	<div>确定删除？</div>  
    <template v-slot:footer>
        <a-button type="danger" @click="doDelete">确定</a-button>
        <a-button type="cancel" @click="editModal.visible=false">取消</a-button>
    </template>
  </a-modal>

简略代码

import {defineComponent, getCurrentInstance, reactive} from "vue";

class TestVO {
	id: string = '';
}

export default defineComponent({
	name: "",
  	setup() {
  		const {proxy}: any = getCurrentInstance();
  		 let state = reactive({
      		params: <any>{},
      		//...其余全局数据
      	});
      	
  		const editModal = reactive({
			visible: false,
			loading: false,
			data: new TestVO (),
		}) ;
		
		//显示提示对话框
		function showDialog(record: any){
		  editModal.visible = true;
		  editModal.data.id = record.id;
		}

		// 删除
		function doDelete() {
			editModal.loading = true,
			$ftsps.http.postData("url", {
				id: editModal.data.id,
			}).then((res: any) => {
				editModal.loading = false;
				if (res.success) {
					editModal.visible = false;
					$ftsps.message.success("删除成功");
					queryDataList();
				} else {
					$ftsps.message.error(res.errMsg);
				}
			});
		}

		return {
	      state,
	      showDialog,
	      doDelete,
	      editModal,
	   };
	}
})

注意的是由于是Vue3，slot属性是v2.6.0 +中已弃用的属性，使用slot属性会报错，以下是错误写法。

<template slot="footer"></template>