通过类样式和定位来操作
  • class
  • custom-class

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

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

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

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

第一种方式,

  1. el-dialog添加class类样式
  2. 必须要放在全局样式中
//注意style不能加scoped
<style>
//test-dialog是添加的类样式
.test-dialog .el-dialog{
  position: absolute;
  left: 20px;
  top: -30px;
}
</style>

第二种方式 

  1.  给el-dialog添加custom-class类样式
  2. 放在全局样式中
    <style lang="scss">
    //虽然可以看到添加成功,但是el-dialog的样式还是会覆盖掉这个
    .test-dialog{
      position: absolute;
      font-size: 20px;
      left: 20px;
      top: -30px;
    }
    </style>

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

 

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐