2023年6月20日发(作者:)
Element-UI框架el-scrollbar组件前⾔Element-UI 官⽅⽂档并没有写到关于 el-scrollbar 的⽂档,具体原因不详, 下⾯整理⼀下关于隐藏组件 el-scrollbar的⽂档说明结构组成
纵向滚动条基础使⽤使⽤注意点: el-scrollbar 标签 必须设定⾼度. 只有包裹内容超过给定⾼度, 才会出现滚动条
横向滚动条基础使⽤横向滚动条在使⽤上和纵向滚动条使⽤的⽅法⼀样,只需给 el-scrollbar 标签设定宽度即可,如果包裹内容超出最⼤宽度就会出现横向滚动条
横向滚动条在使⽤的时候会有⼀些问题,主要表现在这⼏个地⽅:
问题1: window系统下,使⽤横向滚动条后标签底部出现原⽣滚动条解决⽅法:给 el-scrollbar 添加⼀个⽗级 div,⽗级 div 设定⼀个⾼度值,⽐如 200px,el-scrollbar 设定 200px + 17px = 217px。如果⽗级div ⾼度为 100%,则 el-scrollbar 的⾼度为 height: calc( 100% + 17px )
注意事项:el-scrollbar 属于⼀个底层的公共组建,在 element 的包含的组建中,好多都依赖了这个滚动条组建,所有⼀般不建议修改原始的CSS样式,如果要修改,可以套⼀个div,让样式效果只作⽤在当前标签内
详细案例
参数说明类型stringstringstringstring可选值默认值可选值默认值--------falsefalsedivwrapClass可选参数,容器的样式名viewClass可选参数,展⽰视图的样式名wrapStyle可选参数,容器的样式viewStylenativenoresizetag源码
⽂章
可选参数,展⽰视图的样式可选参数,是否使⽤原⽣滚动boolean-可选参数,容器⼤⼩是否是不可变的boolean-可选参数,渲染容器的标签string-
2023年6月20日发(作者:)
Element-UI框架el-scrollbar组件前⾔Element-UI 官⽅⽂档并没有写到关于 el-scrollbar 的⽂档,具体原因不详, 下⾯整理⼀下关于隐藏组件 el-scrollbar的⽂档说明结构组成
纵向滚动条基础使⽤使⽤注意点: el-scrollbar 标签 必须设定⾼度. 只有包裹内容超过给定⾼度, 才会出现滚动条
横向滚动条基础使⽤横向滚动条在使⽤上和纵向滚动条使⽤的⽅法⼀样,只需给 el-scrollbar 标签设定宽度即可,如果包裹内容超出最⼤宽度就会出现横向滚动条
横向滚动条在使⽤的时候会有⼀些问题,主要表现在这⼏个地⽅:
问题1: window系统下,使⽤横向滚动条后标签底部出现原⽣滚动条解决⽅法:给 el-scrollbar 添加⼀个⽗级 div,⽗级 div 设定⼀个⾼度值,⽐如 200px,el-scrollbar 设定 200px + 17px = 217px。如果⽗级div ⾼度为 100%,则 el-scrollbar 的⾼度为 height: calc( 100% + 17px )
注意事项:el-scrollbar 属于⼀个底层的公共组建,在 element 的包含的组建中,好多都依赖了这个滚动条组建,所有⼀般不建议修改原始的CSS样式,如果要修改,可以套⼀个div,让样式效果只作⽤在当前标签内
详细案例
参数说明类型stringstringstringstring可选值默认值可选值默认值--------falsefalsedivwrapClass可选参数,容器的样式名viewClass可选参数,展⽰视图的样式名wrapStyle可选参数,容器的样式viewStylenativenoresizetag源码
⽂章
可选参数,展⽰视图的样式可选参数,是否使⽤原⽣滚动boolean-可选参数,容器⼤⼩是否是不可变的boolean-可选参数,渲染容器的标签string-
发布评论