elementui el-drawer去除自带黑色边框、允许滚动（亲测有效）

​​elementui el-drawer去除自带黑色边框、允许滚动 ​​

注意

要加上​

​scoped​

​作用域才会生效

https://element-plus.gitee.io/zh-CN/component/drawer.html

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

1.去除自带黑色边框

当打开抽屉(el-drawer)时，默认会对标题加上黑色边框，如下图：

仔细发现，整个抽屉的body也会有黑色边框。看起来很丑吧，可通过css去掉：

/deep/ :focus {
    outline: 0;
}      

需要注意的是，这里使用了deep。原因是在vue组件中，在style设置为scoped的时候，在里面写样式对子组件是不生效的，如果想让某些样式对所以子组件都生效，必须使用 /deep/ 深度选择器。

2.允许滚动

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