el-scrollbar 滚动条不显示,elementui scrollbar
本文主要介绍了元素滚动条组件el-scrollbar的使用方法的详细说明,通过示例代码进行了非常详细的介绍,对大家的学习或工作有一定的参考价值。有需要的朋友下面和边肖一起学习。
官网的文章里没有介绍滚动条的使用,但是官方的滚动条源代码有滚动条的样式代码。
风格效果
使用方法
将el-scrollbar组件引入页面
el-scrollbar style=height: 100%
!-由滚动条包装的内容-
Class=容器占位符/div
/El-滚动条
El-scrollbar组件有以下模块:
El-scrollbar:需要指定高度el-scrollbar__wrap:包裹滚动区El-scroll bar _ _ bar is-horizontal:horizontal scroll bar El-scroll bar _ _ bar is-vertical:如果您不需要水平滚动条(不带作用域),则需要垂直滚动条
样式lang=scss
/*元素滚动条组件隐藏水平滚动条*/。侧栏包装器。el滚动条__wrap {
溢出-x:隐藏;
}。is-水平{
显示:无;
}
/风格
方法二:如果在Layout.vue组件中使用了滚动条组件,请不要在Layout.vue中引入隐藏水平滚动条的css样式,这样会影响下拉框选择框等后续滚动条样式。
解决方法:创建一个css文件,在Layout.vue中单独介绍css文件,记得在Layout.vue中添加滚动条组件的父类,以免影响后期的样式。
//common.css
/*元素滚动条组件隐藏水平滚动条*/。侧栏包装器。el滚动条__wrap {
溢出-x:隐藏;
}
Layout.vue
style lang=scss 范围
@导入./assets/CSS/common . CSS ;
.
/风格
关于元素滚动条的详细使用,这篇文章就讲到这里。有关元素滚动条的更多信息,请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们!
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。