ant design vue a-modal实现在关闭前提示用户是否关闭。
以下方式通过插槽实现,其中注意右上角closeIcon插槽需要阻止冒泡,以及:keyboard="false" :maskClosable="false"
<a-modal v-model="visible" :keyboard="false" :maskClosable="false" title="Title">
<template #closeIcon>
<a-icon type="colse" @click.stop="handleCancel"></a-button>
</template>
<template #footer>
<a-button key="back" @click="handleCancel">Return</a-button>
<a-button key="submit" type="primary" :loading="loading" @click="handleOk">Submit</a-button>
</template>
<p>Some contents...</p>
</a-modal>
<script>
export default{
data(){
return {
visible:false,
loading:false
}
},
methods:{
open(){
this.visible = true
},
handleCancel(){
this.$confirm({
title:"提示",
content: "确认关闭?",
onOk:()=>{
this.visible = false
}
})
}
}
}
</script>