element滚动条组件el-scrollbar的使用详解
element官网文章中没有介绍滚动条的使用方式,但是官方滚动条源码中有滚动条的样式代码
样式效果
文章图片
使用方法
页面中引入 el-scrollbar
组件
占位
文章图片
el-scrollbar
组件有以下几个模块的内容:el-scrollbar
:需要指定高度el-scrollbar__wrap
:包裹滚动区域el-scrollbar__bar is-horizontal
:横向滚动条el-scrollbar__bar is-vertical
:纵向滚动条
/* element滚动条组件 隐藏水平滚动条 */.sidebar-wrapper .el-scrollbar__wrap {overflow-x: hidden; }.is-horizontal {display: none; }
方式二:如果 滚动条组件用在
Layout.vue
组件中,请不要在 Layout.vue
中引入隐藏横向滚动条的 css
样式,这会影响后续如 下拉选择框的滚动条样式解决方法:创建一个
css
文件,在 Layout.vue
中单独引入css
文件,记得加上 Layout.vue
中滚动条组件的父级 class
类,避免影响后面的样式// common.css/* element滚动条组件 隐藏水平滚动条 */.sidebar-wrapper .el-scrollbar__wrap {overflow-x: hidden; }
Layout.vue
@import "../assets/css/common.css"; ...
【element滚动条组件el-scrollbar的使用详解】到此这篇关于element滚动条组件el-scrollbar的使用详解的文章就介绍到这了,更多相关element滚动条组件el-scrollbar内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
推荐阅读
- Element|Element el-table的formatter和scope template不能同时存在问题解决办法
- 层次分明井然有条,Go lang1.18入门精炼教程,由白丁入鸿儒,Go lang包管理机制(package)EP10
- Element-ui的layout中gutter
- 层次分明井然有条|层次分明井然有条,Go lang1.18入门精炼教程,由白丁入鸿儒,Go lang包管理机制(package)EP10
- 关于vue-admin-element中的动态加载路由
- 24万“借条”带给我的思考(神奇的情感)
- 《Effective Java》第9条(try-with-resources优先于try-finally)
- element中el-table与el-form同用并校验
- Flutter列表滚动定位超强辅助库使用示例详解
- 生成条形码