element-UI中el-scrollbar的使用
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
在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); // 监听高度变化
});
参考:
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 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)