element-plus中 el-dialog 防止闪烁

您好，针对您的问题，可以采用以下方法来防止el-dialog闪烁：

1. 在弹框组件上设置 :modal-append-to-body="false" 属性，这样可以避免一些层级导致的问题。

2. 在样式中加入以下代码：

.el-dialog__wrapper {
background-color: rgba(0, 0, 0, .5) !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}

这样将为遮罩层添加背景颜色与高斯模糊等效果，减少闪烁。

3. 避免在弹框组件内部进行大量操作，如有需要，可以使用Vue的异步组件或createElement函数，避免DOM重新渲染导致的闪烁问题。

以上是我对于您提出的问题的回答，希望能帮到您。

相关问题

element-plus中 el-dialog闪烁问题如何解决

关于 element-plus 中 el-dialog 闪烁问题的解决方法，您可以尝试以下几种方式：

1. 修改 el-dialog 的样式，添加下面的代码：

.el-dialog__wrapper {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

2. 设置 el-dialog 的 appear 属性为 false，如下代码：

<el-dialog :visible.sync="dialogVisible" :appear="false">
  // ...
</el-dialog>

3. 若使用的是类似于 Vue 的框架，则可以使用 transition 动画，如下代码：

<transition name="fade-transform">
  <el-dialog :visible.sync="dialogVisible">
    // ...
  </el-dialog>
</transition>

// 在样式中添加以下代码：
.fade-transform-enter-active, .fade-transform-leave-active {
  transition: opacity .3s, transform .3s;
}

.fade-transform-enter, .fade-transform-leave-to {
  opacity: .5;
  transform: translateY(-20px);
}

以上是解决 el-dialog 闪烁问题的一些方法，具体选择哪种方式要根据您的实际情况而定。

element-plus中el-dialog关闭后弹出

的confirm提示框中如何防止重复点击确认按钮？

您好，针对您的问题，可以在关闭 el-dialog 的时候，将 confirm 的 visible 属性设置为 true，同时禁用确认按钮，等待一定时间后再将 visible 设置为 false，同时启用确认按钮。这样可以防止用户重复点击确认按钮。具体实现可以参考以下代码：

<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" @close="handleClose">
      Dialog Content
    </el-dialog>
    <el-dialog :visible.sync="confirmVisible">
      <span>{{ confirmMessage }}</span>
      <div slot="footer">
        <el-button :disabled="isConfirmDisabled" @click="handleConfirm">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      confirmVisible: false,
      confirmMessage: '确认关闭？',
      isConfirmDisabled: false,
    };
  },
  methods: {
    handleClose() {
      this.confirmVisible = true;
      this.isConfirmDisabled = true;
      setTimeout(() => {
        this.confirmVisible = false;
        this.isConfirmDisabled = false;
      }, 3000);
    },
    handleConfirm() {
      // 确认关闭操作
    },
  },
};
</script>

当弹出确认框时，确认按钮会被禁用，防止重复点击。3 秒后，确认框会自动隐藏，同时确认按钮会被启用。当用户点击确认按钮时，可以在 handleConfirm 方法中实现关闭 el-dialog 的操作。

希望对您有所帮助，如有疑问，欢迎继续提问！