a-modal 关闭按钮阻止关闭窗口

最新推荐文章于 2024-09-24 11:51:03 发布

落叶上的秋

最新推荐文章于 2024-09-24 11:51:03 发布

阅读量2.1k

点赞数 3

文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/huanglgln/article/details/135967268

版权

本文介绍了如何在AntDesignVue的a-modal组件中，通过模板插槽功能并在closeIcon处添加点击事件，实现关闭对话框前的用户确认提示，并阻止默认的关闭行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>