vue调整el-dialog中body样式

可以通过在`<el-dialog>`标签上使用`custom-class`属性来自定义弹窗的样式，在这个自定义的样式中对`.el-dialog__body`进行样式调整即可。

例如，如果你想让弹窗的body部分背景色变成红色，可以这样写：

<el-dialog title="提示" :visible.sync="dialogVisible" custom-class="my-dialog">
  <span>这是一段内容</span>
</el-dialog>

.my-dialog .el-dialog__body {
  background-color: red;
}

这样就可以将弹窗的body部分背景色调整为红色了。

相关问题

Vue如何控制el-dialog的body尺寸和背景颜色

在Vue中，你可以通过修改Element UI的`el-dialog`组件的样式来控制其body部分的尺寸和背景颜色。`el-dialog`组件提供了一些内联样式选项，但如果你想更精细地控制，你可以利用CSS或者在data里定义一些样式变量。

1. **通过内联属性**:
如果你只需要简单调整，可以在`el-dialog`标签中直接设置一些基本样式，例如:

   <el-dialog :style="{ width: '60%', backgroundColor: '#f5f5f5', padding: '20px' }">
     ...
   </el-dialog>

这样设置了宽度、背景颜色和内边距。

2. **通过CSS**:
如果需要更复杂的样式，你可以在Vue的`mounted()`生命周期钩子里动态添加CSS，例如：

   mounted() {
     document.head.innerHTML += `
       <style>
         .custom-dialog {
           width: 60%;
           background-color: #f5f5f5;
           padding: 20px;
         }
       </style>
     `;
   }

然后在`el-dialog`上应用这个类名：

   <el-dialog class="custom-dialog">
     ...
   </el-dialog>

3. **使用Vue的样式绑定**:
你也可以在数据里定义样式对象，然后在模板中绑定它：

   data() {
     return {
       dialogStyle: { width: '60%', backgroundColor: '#f5f5f5', padding: '20px' }
     }
   },
   
   template: `<el-dialog :style="dialogStyle">
                ...
              </el-dialog>`

这样每次需要改变样式时，只需更新`dialogStyle`对象即可。

vue3 el-dialog高度设置

在Vue3中，可以通过给el-dialog元素添加自定义的样式来设置其高度。可以在el-dialog外部套一层div，并给这个div添加一个自定义的类名，然后在样式中设置这个类名的高度即可。下面是一个示例代码：

<<引用:现在要实现一种窗口高度固定，内容滚动的方式，如下直接在内容上套一层div并加上自定义样式el-dialog-div &lt;el-dialog :title="templateTitle" :visible.sync="openTemplateDialog" :width="templateDialogWidth" append-to-body :close-on-click-modal="false" &gt; &lt;div class="el-dialog-div"&gt; // 窗口内容 &lt;/div&gt; &lt;/el-dialog&gt; &lt;style lang="scss"&gt; .el-dialog-div { height: 60vh; overflow-x: hidden; } &lt;/style&gt; 。

el-dialog默认高度是自由拉伸的，当内容超过屏幕时会出现滚动条，按钮和标题都会随着滚动，用户体验不好。为了解决这个问题，你可以使用以下方法来设置el-dialog的高度：

1. 在el-dialog外部套一层div，并给这个div添加一个自定义的类名，比如"el-dialog-div"。
2. 在样式中设置这个类名的高度，比如设置为60vh，表示60%的视口高度。
3. 同时，设置这个div的overflow-x属性为hidden，以隐藏水平滚动条。

这样，el-dialog的高度就会被固定为60%的视口高度，并且出现内容超出时会出现垂直滚动条，而按钮和标题则保持固定不动，提升了用户体验。