zoukankan      html  css  js  c++  java
  • el-drawer去除自带黑色边框、允许滚动

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

    就是这么简单,你学废了吗?感觉有用的话,给笔者点个赞吧 !
  • 相关阅读:
    Flask_脚本
    数据库
    模板
    视图函数和视图类
    HTTP请求
    Flask路由注册
    初识Flask
    微信小程序之基础使用
    celery任务队列
    文件处理小结
  • 原文地址:https://www.cnblogs.com/zys2019/p/15011723.html
Copyright © 2011-2022 走看看