element-ui弹框dialog无故关闭问题

轩宇瑶

已于 2022-11-23 11:18:43 修改

阅读量2k

点赞数 1

分类专栏： vue 文章标签： ui vue.js javascript

于 2022-11-23 11:01:36 首次发布

本文链接：https://blog.csdn.net/xuanyuyao/article/details/127996467

版权

element-ui弹框dialog无故关闭问题
引起原因，鼠标在dialog内按下滑动到外层遮罩后出发了遮罩的关闭事件，修改方法如下：
源文件中找到目录element-dev =>packages =>dialog =>src => component.vue，替换点击事件@click.self=“handleWrapperClick”，代码如下，修改完成后打包 npm run dist，找到你的项目中的 node_modules 包下的 element-ui 文件夹下的 lib 包，用你修改好后打包生成的 lib 包进行替换即可生效
不会修改源码的可查看https://blog.csdn.net/xuanyuyao/article/details/127995697?spm=1001.2014.3001.5501

<template>
  <transition name="dialog-fade" @after-enter="afterEnter" @after-leave="afterLeave">
    <div v-show="visible" class="el-dialog__wrapper" @mousedown="handleWrapperMousedown($event)" @mouseup="handleWrapperMouseup($event)">
      <div role="dialog" :key="key" aria-modal="true" :aria-label="title || 'dialog'" :class="['el-dialog', { 'is-fullscreen': fullscreen, 'el-dialog--center': center }, customClass]" ref="dialog" :style="style">
        <div class="el-dialog__header">
          <slot name="title">
            <span class="el-dialog__title">{
   {
    title }}</span>
          </slot>
          <button type="button" class="el-dialog__headerbtn" aria-label="Close" v-if="showClose" @click="handleClose">
            <i class="el-dialog__close el-icon el-icon-close"></i>
          </button>
        </div>
        <div class="el-dialog__body" v-if="rendered">
          <slot></slot>
        </div>
        <div class="el-dialog__footer" v-if="$slots.footer">
          <slot name="footer"><