Bootstrap

关于el-dialog中@close事件和取消确认按钮并用,会触发两次关闭表单的操作

关于el-dialog中@close事件和取消确认按钮并用,会触发两次关闭表单的操作

简介:

el-dialog绑定了close方法,el-dialog中的子元素【确认按钮】绑定了click事件,当执行子元素绑定的click事件时,除执行子元素绑定的click方法中的语句,还会执行close中的语句。当绑定的close和click事件中执行逻辑不一致时,最终实现的是close中的逻辑。

解决方法:

  • 当close和click按钮的业务逻辑不一致时,我们将取消(点击右上角的x)的逻辑写在before-close的方法中
  • 当close和click按钮的业务逻辑一致时,我们将取消(点击右上角的x)的逻辑可以写在close方法中

代码如下:

<el-dialog
      title="用户注册"
      :visible.sync="dialogVisible"
      width="45%"
      :close-on-click-modal="false"
       @before-close="closeDialogHead"
    >
     
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click.stop="onConfirm">确认</el-button>
        <el-button
          @click="closeDialog"
          style="border: 1px solid #001f76; color: #001f76"
          >关闭</el-button
        >
      </span>
      </el-dialog>

参考

https://blog.csdn.net/Note_creek/article/details/129182906

;