ElementUI 高亮_elementui dialog高度

在使用ElementUI时，如果需要高亮显示elementui dialog组件或者调整其高度，可以通过一些样式和属性配置的方法来实现。

解决方案简述： 对于高亮显示，可以自定义样式类名并添加特定的CSS样式。对于Dialog高度调整，可以通过设置内联样式、修改组件默认样式或利用ElementUI提供的height相关属性来完成。

一、高亮显示dialog

1. 自定义样式类名
   • 在创建Dialog实例时，通过custom-class属性为Dialog添加一个自定义类名。
     html
<template>
<el-dialog :visible.sync="dialogVisible" custom-class="highlight-dialog">
<!-- Dialog内容 -->
</el-dialog>
</template>

   • 然后在样式文件中（如标签内），定义这个类名对应的样式以实现高亮效果。
     ```css

.highlight-dialog {
border: 5px solid red;/* 可以根据需求更改边框颜色等样式实现高亮 */
}

```

二、调整dialog高度

1. 使用内联样式
   • 如果想要简单地调整Dialog的高度，可以直接在Dialog组件上添加内联样式。
     html
<template>
<el-dialog :visible.sync="dialogVisible" :style="{height:'60vh'}">
<!-- Dialog内容 -->
</el-dialog>
</template>

   • 这里将Dialog的高度设置为视口高度的60%，可以根据实际情况调整数值。
2. 修改组件默认样式
   • 由于ElementUI的Dialog组件是基于弹性盒子布局的，我们可以在全局样式文件中覆盖默认样式。例如，如果想让Dialog的内容区域高度固定，可以这样做。
     css
/* 全局样式文件中 */
.el-dialog__body{
height: 300px;
overflow-y: auto;/* 当内容超出时可滚动 */
}

3. 利用ElementUI提供的属性
   • ElementUI提供了fullscreen属性，当设置为true时，Dialog会全屏显示，这也是一种特殊的高度调整方式。
     html
<template>
<el-dialog :visible.sync="dialogVisible" fullscreen>
<!-- Dialog内容 -->
</el-dialog>
</template>

   • 同时还有modal - class属性，可以用来给遮罩层添加样式类名，间接影响Dialog的整体显示效果，包括高度等方面。