el-drawer去除自帶黑色邊框、允許滾動

1.去除自帶黑色邊框

當打開抽屜(el-drawer)時，默認會對標題加上黑色邊框，如下圖：

仔細發現，整個抽屜的body也會有黑色邊框。看起來很丑吧，可通過css去掉：

/deep/ :focus {
    outline: 0;
}

需要注意的是，這里使用了deep。原因是在vue組件中，在style設置為scoped的時候，在里面寫樣式對子組件是不生效的，如果想讓某些樣式對所以子組件都生效，必須使用 /deep/ 深度選擇器。

2.允許滾動

當內容超過抽屜的容器高度時，默認是不會上下滾動，出現滾動條的。造成的后果就是超出的部分無法查看，解決辦法就是通過css來設置滾動條並允許上下滾動：

/deep/ .el-drawer__body {
      overflow: auto;
}
/deep/ .el-drawer__container ::-webkit-scrollbar{
      display: none;
}

細心的你可能發現了，改變el-drawer的樣式時，都使用了深度選擇器。