elementUi滚动条的使用及设置滚动条一直显示
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
把想要出滚动条的内容放在下边标签里即可:
<el-scrollbar style="height:100%">
</el-scrollbar>
- 如果不想要横向的滚动条,添加css
.el-scrollbar__wrap {
overflow-x: hidden;
}
- 如果相让滚动条一直显示而不是鼠标移入才显示,添加css
.el-scrollbar__bar.is-vertical {
opacity: 1;
}
- 滚动到自定义位置
<el-scrollbarl ref="scroll">
// ...
</el-scrollbar>
this.$refs['scroll'].wrap.scrollTop = 100 //想滚到哪个高度,就写多少
- 动态滚动条
<el-scrollbar :style="{height: getHeight()}">
<div v-for="item of dataList">
//...
</div>
</el-scrollbar>
<script>
methods: {
getHeight() {
//内容高度小于100px 的时候,区域随内容高度自适应;内容高度大于 100px 时显示滚动条
if(this.dataList.length>5) {
return '100px'
} else {
return 'auto'
}
}
}
//...
</script>
- 滚动条出现的问题及解决方案
如果父级高度会改变,那么滚动条上下拖动就会出现异常
这时只需要在父组件高度改变时,调用组件的update
方法即可
如:窗口高度改变时
<el-scrollbar style="height:100%" ref="scrollbar"></el-scrollbar>
let timer = 0;
window.onresize = () => {
//防抖
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
this.$refs.scrollbar.update();
}, 500);
}
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45
8 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 8 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)