css--自定义dialog

     通常组件的样式是适合大众使用的，当我们想使用element组件的自定义dialog样式时，需要注意以下几点，也是我探索的一个过程。 

一、自定义一个class

  我这里是 ：class="my-dialog"，如果想自定义title，则需要使用slot="title",将原始组件样式使用插槽进行传值替代原样式。

       <el-dialog
        :visible.sync="visible"
        width="30%"
        :append-to-body="true"
        class="my-dialog"
        title="小贴士"
      >
<!--        <span slot="title">小贴士</span>-->
        <span>
          有问题，请联系我~
        </span>
        <span slot="footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="visible = false">确 定</el-button>
      </span>
      </el-dialog>

二、修改时加deep

   刚开始我以为只需要自己的class加原组件的样式就可以生效，结果发现并不行。经查阅和验证，发现得要deep，防止污染父组件，当然有些会出现兼容性问题，你可以将 /deep/ 改成 ::v-deep,简单修改如下：

.my-dialog ::v-deep .el-dialog__header {
    text-align: center;
    background-color: #FCE38A;
  }
  .my-dialog ::v-deep .el-dialog__body {
    text-indent:2em;
    background-color: #a1e0fd;
  }
  .my-dialog ::v-deep .el-dialog__footer {
    background-color: #42b983;
  }

三、效果图