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.允許滾動

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

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

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

參考鏈接：
https://www.cnblogs.com/zys2019/p/15011723.html

總結

以上是生活随笔為你收集整理的elementui el-drawer去除自带黑色边框、允许滚动（亲测有效）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。