通过类样式和定位来操作
- class
- custom-class
使用chrome开发者工具可以看到el-dialog基本结构:
class是给弹出框的父节点添加类样式
custom-class是给弹出框添加类样式,与el-dialog同级
如果要想改变el-dialog的位置,有两种方式:
第一种方式,
- el-dialog添加class类样式
- 必须要放在全局样式中
//注意style不能加scoped
<style>
//test-dialog是添加的类样式
.test-dialog .el-dialog{
position: absolute;
left: 20px;
top: -30px;
}
</style>
第二种方式
- 给el-dialog添加custom-class类样式
- 放在全局样式中
<style lang="scss"> //虽然可以看到添加成功,但是el-dialog的样式还是会覆盖掉这个 .test-dialog{ position: absolute; font-size: 20px; left: 20px; top: -30px; } </style>
注意:这种不能通过定位来改变弹出框位置,只能改变原本el-dialog没有定义的样式,比如说字体等