在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博客

GitHub 加速计划 / eleme / element
15
3
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45 1 年前
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 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐