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

1.去除自带黑色边框

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

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的样式时,都使用了深度选择器。

 

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

上一篇:js实现约瑟夫问题


下一篇:go文件操作