如何给el-dialog实现响应式

要给 el-dialog 实现响应式，可以使用 CSS 的媒体查询和 flex 布局。具体实现步骤如下：

1. 在 el-dialog 的外层包裹一个 div 容器，设置该容器为 flex 布局，并将子元素（el-dialog）的宽度设置为 100%。

2. 使用 CSS 媒体查询来设置 el-dialog 在不同屏幕尺寸下的样式，如：

@media screen and (max-width: 768px) {
  .dialog-container {
    flex-direction: column;
  }
  .dialog-container .el-dialog {
    width: 100%;
  }
}

在上述代码中，当屏幕宽度小于 768px 时，将容器的 flex-direction 设置为 column（纵向排列），并将 el-dialog 的宽度设置为 100%。

3. 根据需要设置 el-dialog 的最大宽度和最大高度，以保证在不同屏幕尺寸下都能正常显示。

下面是一个示例代码：

<template>
  <div class="dialog-container">
    <el-dialog
      title="对话框标题"
      :visible.sync="dialogVisible"
      :max-width="maxWidth"
      :max-height="maxHeight"
    >
      <p>对话框内容</p>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      maxWidth: '800px',
      maxHeight: '600px'
    }
  }
}
</script>

<style>
.dialog-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .dialog-container {
    flex-direction: column;
  }
  .dialog-container .el-dialog {
    width: 100%;
  }
}
</style>

在上述示例中，我们将 el-dialog 包裹在一个名为 dialog-container 的 div 容器中，使用 flex 布局将其居中显示。在不同屏幕尺寸下，容器的 flex-direction 会发生变化，从而实现了 el-dialog 的响应式布局。