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

2024-01-03 21:26:22

1.去除自带黑色边框

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

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

/deep/ :focus {
    outline: 0;
}

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

当内容超过抽屉的容器高度时，默认是不会上下滚动，出现滚动条的。造成的后果就是超出的部分无法查看，解决办法就是通过css来设置滚动条并允许上下滚动：

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

细心的你可能发现了，改变el-drawer的样式时，都使用了深度选择器。