在vue2和element-ui组件中设置el-dialog的样式

在 Vue2 中使用 Element UI 的 `ElDialog` 组件时，如果你想自定义其样式，可以通过在 CSS 文件中添加样式或者直接在组件的模板上使用 `style` 标签来覆盖默认样式。以下是两个常见的做法：

1. **全局样式** (推荐):
如果你想让整个应用都生效，可以在项目的全局 CSS 文件（如 `main.css` 或 `app.scss`) 中编写规则，例如：

   .el-dialog {
     /* 定义新的背景颜色、边框等 */
     background-color: #f5f5f5;
     border-width: 1px;
     border-radius: 4px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
   }

   /* 或者针对特定大小的dialog */
   .el-dialog--small {
     width: 30%; /* 修改小尺寸对话框的宽度 */
   }

2. **局部样式**:
如果只对某个 `ElDialog` 实例进行定制，可以将上述CSS规则放在该组件的样式标签中：

   <template>
     <el-dialog :style="{ backgroundColor: '#your-color', width: '30%' }" title="标题">
       <!-- 内容 -->
     </el-dialog>
   </template>

   <script>
   export default {
     // ...
   };
   </script>

在以上例子中，`:style` 属性允许你在运行时动态绑定 CSS 规则。