el-dialog改变弹出框的位置

最新推荐文章于 2025-01-21 10:38:25 发布

lytjiayou

最新推荐文章于 2025-01-21 10:38:25 发布

阅读量1.2w

点赞数 3

文章标签： vue.js elementui

本文链接：https://blog.csdn.net/lytjiayou/article/details/131418417

版权

文章介绍了如何通过添加class和custom-class来改变element-ui的el-dialog组件的样式。使用class能直接定位，但需在全局样式中避免被scoped属性限制。而custom-class则主要用于扩展原有样式，无法直接改变定位，主要适用于修改非默认定义的属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用chrome开发者工具可以看到el-dialog基本结构:

class是给弹出框的父节点添加类样式

custom-class是给弹出框添加类样式，与el-dialog同级

如果要想改变el-dialog的位置，有两种方式：

第一种方式，

//注意style不能加scoped
<style>
//test-dialog是添加的类样式
.test-dialog .el-dialog{
  position: absolute;
  left: 20px;
  top: -30px;
}
</style>

第二种方式

放在全局样式中

<style lang="scss">
//虽然可以看到添加成功，但是el-dialog的样式还是会覆盖掉这个
.test-dialog{
  position: absolute;
  font-size: 20px;
  left: 20px;
  top: -30px;
}
</style>

注意：这种不能通过定位来改变弹出框位置，只能改变原本el-dialog没有定义的样式，比如说字体等