在使用element-ui组件过程中遇到了几个非常奇怪的问题。经过一番探索解决了问题，在这里总结一下，希望正在踩坑的朋友们能看到。

1. 打开el-drawer组件，点击右侧会聚焦整个弹框，并显示很丑的聚焦框，具体效果见下图
   

解决办法：

// less样式修改
/deep/ .el-drawer__container:focus {
  outline: none; 
}
/deep/ .el-drawer:focus {
  outline: none; 
}

2. 组件设置了withHeader为false的情况下，会自动聚焦里面的可聚焦的第一个组件，例如dataPicker的弹框或者input框，select框等
   

解决办法：

// html修改
<el-drawer
  :visible.sync="drawerShow"
  :with-header="true"
  :wrapperClosable="true"
></el-drawer>
// 样式修改
/deep/ .el-drawer{
  .el-drawer__header{
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden; 
  }
}

第二个问题找了好久，发现是自动聚焦的问题，想探索的朋友不妨添加一个title将with-header设置为true可以看到打开抽屉，自动聚焦到了头部的title，我想这也就是为什么设置了with-header为false会聚焦到时间选择的原因，通过设置样式仅仅是使聚焦的状态看不到，但是聚焦仍然存在，好在不影响体验。