使用element-ui对话框组件时点击确定提示信息框会抖动

这个问题可能是由于对话框组件的关闭动画与提示信息框的弹出动画同时执行，导致两个动画产生冲突，从而导致提示信息框抖动的问题。你可以尝试在关闭对话框组件时，先禁用提示信息框的弹出动画，等对话框组件完全关闭后再启用提示信息框的动画，这样就可以避免两者的冲突了。具体的操作方法可以参考以下代码示例：

// 禁用提示信息框的弹出动画
this.$message.close = function() {
  this.visible = false;
};

// 关闭对话框组件
this.$confirm('确定要删除吗？', '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning'
}).then(() => {
  // 启用提示信息框的动画
  this.$message.close = function() {
    this.visible = false;
    this.$nextTick(() => {
      this.closed = true;
    });
  };
  // 执行删除操作
}).catch(() => {
  // 取消删除操作
});

这样就可以避免对话框组件与提示信息框产生冲突，从而解决抖动的问题。

相关问题

element-ui 对话框

Element UI对话框是一个用于显示弹出窗口的组件，可以在弹出窗口中显示自定义内容，包括文本、图像、表单、列表等。对话框组件具有以下特点：

1. 可以自定义对话框的标题、内容、按钮等；
2. 支持多种对话框类型，包括模态对话框、非模态对话框、全屏对话框等；
3. 支持自定义对话框的宽度和高度；
4. 支持自定义对话框的位置；
5. 支持自定义对话框的遮罩层；
6. 支持通过代码方式打开和关闭对话框。

使用Element UI对话框组件可以方便地实现弹出窗口功能，提高前端开发效率。

Vue中使用element-ui的el-dialog对话框

要在Vue中使用element-ui的el-dialog对话框，你需要先安装element-ui，可以使用npm或者yarn进行安装。

1. 通过npm安装

npm install element-ui --save

2. 通过yarn安装

yarn add element-ui

安装完成后，在Vue项目中引入element-ui，并注册el-dialog组件。

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

现在你可以在Vue组件中使用el-dialog组件了。下面是一个简单的示例：

<template>
  <div>
    <el-button type="primary" @click="dialogVisible = true">打开对话框</el-button>
    <el-dialog title="提示" :visible.sync="dialogVisible">
      <span>这是一个对话框</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    }
  }
}
</script>

在这个示例中，我们使用了el-button组件来触发打开对话框的事件，然后在el-dialog组件中定义了对话框的标题和内容，并使用visible.sync来控制对话框的显示和隐藏。在底部我们使用了el-button组件来定义对话框的按钮区域。

这是一个简单的例子，你可以根据自己的需求来定制对话框的样式和交互。