element ui Dialog对话框_el-dialog的x号如何触发-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36010613/article/details/104005087

本文探讨了在Element UI中Dialog对话框遇到的问题，即点击关闭按钮（×）时如何触发自定义事件。文中提到，尝试使用`before-close`、`destroy-on-close`和`close`等内置属性无效，最终通过使用slot绑定实现了自定义关闭行为，并设置了`close-on-click-modal="false"`以防止点击遮罩层关闭对话框，同时隐藏了关闭按钮(`show-close="false"`)。

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

element ui Dialog对话框点×触发事件

点击标题右上角的×执行的事件使用的是自己手写的方法
用slot绑定重写
使用本身的 before-close、destroy-on-close、close均没有用

:close-on-click-modal=“false” // 点击遮罩不关闭
:show-close=“false” // 不显示关闭按钮

<template>
	<el-dialog :visible.sync="dialogFormVisible" :close-on-click-modal="false" :show-close="false">
		<div slot="title" class="header-title">
			<span style="font-size:18px;color:#333333;">新增二级分类</span>
			<span style="float: right;font-size: 24px;padding: 0 10px;cursor: pointer;" @click="closeDialog">×</span>
		</div>
		<el-form :model="form">
			<el-form-item label="分类名称" :label-width="formLabelWidth">
				<el-input
				v-model="form.name"
				autocomplete="off"
				placeholder="请输入分类名称，最多十个字"
				maxlength="10"
				show-word-limit></el-input>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="cancelFun">取 消</el-button>
			<el-button type="primary" @click="onSubmit">确 定</el-button>
		</div>
	</el-dialog>
</template>

data () {
	return {
      	dialogFormVisible: true,
      	form: {
        	name: ''
      	},
      	formLabelWidth: '120px'
	}
},
methods: {
	// 关闭弹框的事件
    closeDialog () {
      	this.form.name = ''
      	this.dialogFormVisible = false
    },
    // 点击取消事件
    cancelFun () {
    	this.dialogFormVisible = false
      	this.form.name = ''
    },
    // 点击确定事件
    onSubmit () {
    	if (this.form.name === '') {
        	this.commonTip('请输入分类名称')
        	return false
      }
      this.dialogFormVisible = false
      // 这里写你确定之后的事件
    }
}