el-dialog改变弹出框的位置

     通过类样式和定位来操作

• class
• custom-class

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

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

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

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

第一种方式，

1. el-dialog添加class类样式
2. 必须要放在全局样式中

1.  
   //注意style不能加scoped
2.  
   <style>
3.  
   //test-dialog是添加的类样式
4.  
   .test-dialog .el-dialog{
5.  
   position: absolute;
6.  
   left: 20px;
7.  
   top: -30px;
8.  
   }
9.  
   </style>

第二种方式 

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

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

这篇好文章是转载于：学新通技术网