vue-admin-template学习（三）

@[TOC]样式修改

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，了解的不多，需要多研究研究。
—————————————————————
作为初学者，很多前端的知识都没有掌握，见谅，如有错误请指出，以期进步，感谢！。后续有新的学习，继续补充上来。