vue elementui的dialog弹出框，首次加载页面可以显示，第二次打开隐藏

原创已于 2023-08-28 18:00:22 修改 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端

于 2023-08-28 17:59:24 首次发布

本文讨论了在Vue组件中，如何修复点击El-dialog右上角关闭按钮时不调用handleCancel方法的问题，通过修改`@close=handleCancel`来确保关闭事件处理。

由于点右上角关闭按钮时不会触发handleCancel方法，改变visible的值，需增加@close="handleCancel"

<el-dialog

      width="80%"

      :visible.sync="visible"

      title="上传图片"

      :show-close="true"

      close-on-click-modal="false"

      append-to-body

      @close="handleCancel"

    >

      <gd-form

        ref="form"

        style="width: 100%; max-width: 100%"

        :fields="fields"

        :buttons="buttons"

        label-width="120px"

        :disabled="readonly"

      />

      <div v-show="!readonly" slot="footer" class="dialog-footer">

        <el-button @click="handleCancel">取 消</el-button>

        <el-button type="primary" @click="handleConfirm">保存</el-button>

      </div>

    </el-dialog>

  </gl-container>


   // 取消

    handleCancel() {

      this.$emit('update:visible', false)

    }