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

以你之姓@ 2023-10-01 12:44 24阅读 0赞

## [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)时，默认会对标题加上黑色边框，如下图：

![img][]

仔细发现，整个抽屉的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_]: https://www.cnblogs.com/zys2019/p/15011723.html
[img]: https://img-blog.csdnimg.cn/img_convert/e3e7598c124b006b257644cadd0e1ce2.png

发表评论取消回复

表情：

评论列表（有 0 条评论，24人围观）

还没有评论，来说两句吧...

相关阅读

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

[elementui el-drawer去除自带黑色边框、允许滚动 ][elementui el-drawer_] 注意要加上`scoped`作用域才会生效

以你之姓@/ 2023年10月01日 12:44/ 0 赞/ 25 阅读

相关 Linux 设置 jar 包开机自启动（亲测有效）

前言：重点重点重点 > 请注意，这里的export设置环境变量不可少，如果不知道本机的环境变量，可以通过 more /etc/profile 来查看。 > ![

心已赠人/ 2023年09月27日 17:54/ 0 赞/ 222 阅读

相关 Windows 怎么样设置nginx开机自启动(亲测有效)

Windows 怎么样设置nginx开机自启动(亲测有效) nginx是一款功能强大比apache还要火热的web服务软件一般在Linux里面设置nginx自启动很

以你之姓@/ 2023年06月05日 12:54/ 0 赞/ 49 阅读

相关自签名证书配置HTTPS（亲测有效）

一、需要openssl的版本为1.0.0 查看服务器上的版本：openssl version 二、安装openssl-1.0.0 (1)将原来的改名 /usr/

迷南。/ 2023年03月02日 04:56/ 0 赞/ 101 阅读

相关去除element-ui中el-drawer标题自带黑色框

背景在使用Element-UI中的 <el-drawer 组件时，出现了默认选中标题的问题，如下截图 ![20210421144426558.gif][] 解决办

Myth丶恋晨/ 2023年01月15日 03:44/ 0 赞/ 96 阅读

相关 Ubuntu安装libmediainfo（亲测有效）

文章目录 \准备 1、下载和系统对应的\`libmediainfo0\` 和 \`libzen0\`

不念不忘少年蓝@/ 2022年10月16日 07:49/ 0 赞/ 476 阅读

相关 android 自定义Dialog去除黑色边框

在自定义Dialog时显示的界面中老是有黑色的边框，下面就介绍使用style去除黑色边框方法。首先在values/styles定义自定义样式： <sty

桃扇骨/ 2022年08月13日 00:49/ 0 赞/ 539 阅读

相关 Android的AlertDialog，setView后去除黑色边框

1、通过使用theme AlertDialog.Builder builder = new Builder(new ContextThemeWrapper(\_this,R.

╰+哭是因爲堅強的太久メ/ 2022年08月08日 06:42/ 0 赞/ 216 阅读

相关 ueditor 赋值取值(亲测有效)

var ue = UE.getEditor('editor'); // editor准备好之后才可以使用 ue.addList

深碍√TFBOYSˉ_/ 2022年05月29日 11:47/ 0 赞/ 662 阅读

相关 ESRI系列去掉Esri自带的Logo标志大全（亲测有效）

ESRI产品大多数发布的地图都带有esri标志LOGO，如何去除：一、arcgis api 3.X系列 map = new esri.Map("map", \{ e

冷不防/ 2021年07月25日 00:48/ 0 赞/ 524 阅读