在elment-ui中有这么一个滚动条,当鼠标over到内容部分才会显示,移开鼠标之后滚动条就会隐藏起来,相较于原生的滚动条比较美观。
<el-scrollbar> //将滚动条的内部的内容放在里面即可 </el-scrollbar>
在使用过程中,如果父级高度发生改变的时候,滚动条拖动就会出现异常的情况,这个时候需要父组件的高度,当发生改变的时候,调用组件的 update 方法;这里主要在 mounted 里面对其进行监听,当然定时器也可以(详见参考)
<el-scrollbar style="height:100%" ref="scrollbar"></el-scrollbar>this.$nextTick(() => {const scr = this.$refs.scrollbar.$el; // 获取<el-scrollbar>的DOM节点const observer = new ResizeObserver(() => {this.$refs.scrollbar.update();});observer.observe(scr); // 监听高度变化
});
参考:
elementUi滚动条的使用及设置滚动条一直显示_element ui 滚动条-CSDN博客