elementui el-drawer去除自带黑色边框、允许滚动(亲测有效)
elementui 有效 滚动 去除 自带 允许 亲测 el
2023-09-14 09:01:59 时间
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
相关文章
- Vue笔记:vue项目引入bootstrap、elementUI、echarts
- vue elementui el-select通过@Change触发事件
- vue elementUI表单输入时触发事件@input
- ElementUI弹出新增窗口
- elementui 表格序号el-table自定义序号事件
- elementui的el-select下拉框 el-option无法选择、绑定的值无法选中
- vue项目elementui 的 el-checkbox复选框改成单选框样式:实现全选、全否、单选、反选功能(最简单的方法)
- elementui 标签el-tabs等分显示
- Vue+ElementUI项目使用webpack输出MPA
- ElementUI+VUE 在使用ElementUI日期选择器时大于当前月份的日期不可选,默认日期
- ElementUI的Table表格添加自定义头CheckBox多选框
- 【项目实战】前端基于ElementUI实现对提交的附件大小进行控制
- springboot+jwt+shiro+vue+elementUI+axios+redis+mysql简易博客项目