样式修改

el-dialog样式修改

el-dialog_header

el-dialog原来的头部显示如图：

（1）如果要全局修改样式，就比较简单，只需要在style里通过图上的classname就可以设置，这样的话，其他的el-dialog也就会变的一样的样式。 （2）这里主要说一下局部修改样式。 思路：给el-dialog新命名classname，然后通过新的classname样式选择器往要修改的classname上选择，这样在浏览器渲染时就可以渲染到新的样式，并且因为在其他的el-dialog上没有父classname，也就会按照el-dialog原来的样式渲染。达到局部修改样式效果。

1. 给el-dialog添加classname

   <el-dialog :visible.sync="dialogOfUpload" class="upload-dialog">
   <span slot="title" style="font-size: 18px;">{{ textMap['upload'] }}</span>
   </el-dialog>
   

2. 写style标签，记得不加scope

   <style>
   .upload-dialog .el-dialog__header {
   border-bottom: 1px solid #e8eaec;
   }
   </style>
   

   比较简单，想要在.el-dialog__header加上分割线 3.查看渲染效果

   

   

从上面两个图中可以看到： （1）确实是在el-dialog_header增加了样式； （2）并且都是局部修改样式，并没有影响到其他的el-dialog。 但是： （1）因为我们在el-dialog使用class自定义一个className时，在渲染后，定义的className跑到了el-dialog_wrapper上了（不知道为什么，还没有去找答案）。并且，我在第一次使用class在el-dialog上自定义className时，其实并没有成功，也不知道为什么，可能是浏览器的缓存。 （2）从element ui官网中，可以看到要Dialog自定义className，需要使用custom-class

4.根据官网指示将class="upload_dialog"修改为custom-class="upload-dialog"。进行渲染。

可以看到，在el-dialog上自定义className是正确定义在自身上的，根据该className可自定义样式。比如修改头部背景颜色等。

el-steps样式修改

description修改

竖直的el-steps样式如图：

想要在每一个步骤下面自定义样式，就要用到vue的插槽slot了。

<el-steps direction="vertical">
  <el-step :title="approvalProcessProject['modelItem']">
    <template slot="description">
      <el-button slot="trigger" size="small" type="primary" style="margin-top: 20px;margin-bottom: 20px;" @click="downloadTemplate">下载</el-button>
    </template>
  </el-step>
</el-steps>

关于插槽slot，了解的不多，需要多研究研究。

—————————————————————

作为初学者，很多前端的知识都没有掌握，见谅，如有错误请指出，以期进步，感谢！。后续有新的学习，继续补充上来。