element UI el-dialog校验规则点击取消之后还是会出现提示信息

1、vue element UI el-dialog 如何监听右上角 x 关闭按钮

<el-dialog :before-close="handleDialogClose">
</el-dialog>
 
 
methods: {
    /**
    * 点击 X 关闭对话框的回调
    **/
    handleDialogClose() {
       
    }
}

2、点击弹框“取消”，清除校验规则
html部分:

<el-form ref="ruefs">

js部分：
method:

sumbit（）：{ this.$refs["rules"].clearValidate();}