vue 定义dialog特定左边栏，不影响其他引用

首先，index.css改为

@keyframes dialog-fade-in {
    0% {
      transform: translate3d(100%, 0, 0);
      opacity: 0;
    }
    100% {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }


@-webkit-keyframes dialog-fade-out {
    0% {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }

    100% {
        -webkit-transform: translate3d(100%, 0, 0);
         transform: translate3d(100%, 0, 0);
        opacity: 0
    }
}
  @keyframes dialog-fade-out {
    0% {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
    100% {
      transform: translate3d(100%, 0, 0);
      opacity: 0;
    }
  }

此处为所有前端的dialog样式被填充为做了淡出:

此处，我需要的是部分是紧靠左侧的弹框，如下入这种形式

此处，我们又不想更改另一种模式

如系统默认的下面的形式：

 

因此，我们考虑，单独写样式，由于VUE的特殊性，还有可能存在的子层dialog的嵌套，我们单独写子项指代样式：

.leftDialog > .el-dialog{
    margin: 0!important;
    height: 100%!important;
    border-radius: 0!important;
    right: 0!important;
    float: right!important;
}
.leftDialog > .el-dialog > .el-dialog__header > .el-dialog__headerbtn{
    display:none;
}
.leftDialog > .el-dialog > .el-dialog__body{
    padding-top: 0;
}

简单理解，我们加了leftDialog ，这边前端我们的dialog是可控的，加样式太简单不过了

此时，点击再尝试，我们会发现，我需要的侧边栏，出来了，同时，我其他项的弹框样式依旧保持element-ui原样。