基本概念

el-scrollbar：Element UI隐藏组件。

注意事项：

1.el-scrollbar的父层要有固定高度

2.el-scrollbar的高度要设成100%

3.如果出现横滚动条，添加overflow-x:hidden;

源代码

// reference https://github.com/noeldelgado/gemini-scrollbar/blob/master/index.jsimport { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
import scrollbarWidth from 'element-ui/src/utils/scrollbar-width';
import { toObject } from 'element-ui/src/utils/util';
import Bar from './bar';/* istanbul ignore next */
export default {name: 'ElScrollbar',components: { Bar },props: {native: Boolean,wrapStyle: {},wrapClass: {},viewClass: {},viewStyle: {},noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能tag: {type: String,default: 'div'}},data() {return {sizeWidth: '0',sizeHeight: '0',moveX: 0,moveY: 0};},computed: {wrap() {return this.$refs.wrap;}},render(h) {let gutter = scrollbarWidth();let style = this.wrapStyle;if (gutter) {const gutterWith = `-${gutter}px`;const gutterStyle = `margin-bottom: ${gutterWith}; margin-right: ${gutterWith};`;if (Array.isArray(this.wrapStyle)) {style = toObject(this.wrapStyle);style.marginRight = style.marginBottom = gutterWith;} else if (typeof this.wrapStyle === 'string') {style += gutterStyle;} else {style = gutterStyle;}}const view = h(this.tag, {class: ['el-scrollbar__view', this.viewClass],style: this.viewStyle,ref: 'resize'}, this.$slots.default);const wrap = (<divref="wrap"style={ style }onScroll={ this.handleScroll }class={ [this.wrapClass, 'el-scrollbar__wrap', gutter ? '' : 'el-scrollbar__wrap--hidden-default'] }>{ [view] }</div>);let nodes;if (!this.native) {nodes = ([wrap,<Barmove={ this.moveX }size={ this.sizeWidth }></Bar>,<Barverticalmove={ this.moveY }size={ this.sizeHeight }></Bar>]);} else {nodes = ([<divref="wrap"class={ [this.wrapClass, 'el-scrollbar__wrap'] }style={ style }>{ [view] }</div>]);}return h('div', { class: 'el-scrollbar' }, nodes);},methods: {handleScroll() {const wrap = this.wrap;this.moveY = ((wrap.scrollTop * 100) / wrap.clientHeight);this.moveX = ((wrap.scrollLeft * 100) / wrap.clientWidth);},update() {let heightPercentage, widthPercentage;const wrap = this.wrap;if (!wrap) return;heightPercentage = (wrap.clientHeight * 100 / wrap.scrollHeight);widthPercentage = (wrap.clientWidth * 100 / wrap.scrollWidth);this.sizeHeight = (heightPercentage < 100) ? (heightPercentage + '%') : '';this.sizeWidth = (widthPercentage < 100) ? (widthPercentage + '%') : '';}},mounted() {if (this.native) return;this.$nextTick(this.update);!this.noresize && addResizeListener(this.$refs.resize, this.update);},beforeDestroy() {if (this.native) return;!this.noresize && removeResizeListener(this.$refs.resize, this.update);}
};

问题分析

通过阅读源码，scrollbar组件暴露了 native, wrapStyle, wrapClass, viewClass, viewStyle, noresize, tag 这7个 props属性

props: {native: Boolean,  // 是否使用本地，设为true则不会启用element-ui自定义的滚动条wrapStyle: {},  // 包裹层自定义样式wrapClass: {},  // 包裹层自定义样式类viewClass: {},  // 可滚动部分自定义样式类viewStyle: {},  // 可滚动部分自定义样式noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能tag: {  // 生成的标签类型，默认使用 `div`标签包裹type: String,default: 'div'}
}

注： wrapStyle和viewStyle必须以分号;结尾。

代码示例

<el-scrollbar wrap-class="list" wrap-style="overflow-x:hidden;" view-class="view-box" view-style="font-weight: bold;height:100%;" :native="false"><el-treeclass="tree":data="menuItems"node-key="id":default-expanded-keys="expandedKeys":default-checked-keys="checkedKeys":props="defaultProps":expand-on-click-node="false":render-content="renderContent"></el-tree>
</el-scrollbar>

运行效果

参考文章

https://www.jianshu.com/p/6538698578f5/

https://blog.csdn.net/zhouweihua138/article/details/80077311

Element UI——滚动条组件(ElScrollBar)修改.el-scrollbarwrap和el-scrollbarview的CSS属性相关推荐

element-ui滚动条组件el-scrollbar
Element的滚动条组件el-scrollbar 在使用ElementUI框架的时候,发现它的官网左侧栏的滚动条不是系统自带的滚动条,查了一下源码发现,还真是有实现了滚动条的功能:Element的滚 ...
element ui upload组件文件上传一次后，不论是上传成功之后修改文件再上传还是上传失败重新上传，再次点击上传均无反应。
问题: Element UI Upload 组件文件上传一次后,不论是上传成功之后修改文件再上传还是上传失败重新上传,再次点击上传均无反应. 原因: 第一次上传文件后,浏览器还保存着我们已经上传的文 ...
Vue + Element UI——滚动条el-scrollerbar和无限滚动指令v-infinite-scroll整合解决方案
基本概念 el-scrollbar:Element UI隐藏组件. 注意事项: 1.el-scrollbar的父层要有固定高度 2.el-scrollbar的高度要设成100% 3.如果出现横滚动条, ...
element走马灯自动_vue Element UI走马灯组件重写
1.element ui走马灯组件 -- carousel 分析一波源代码: carousel/src/main.vue 文件为 el-carousel文件主要功能 carousel/src/item ...
element走马灯自动_[转]vue Element UI走马灯组件重写
1.element ui走马灯组件 -- carousel 分析一波源代码: carousel/src/main.vue 文件为 el-carousel文件主要功能 carousel/src/item ...
bind-html自动换行,vue element ui this.$alert 样式修改，长词自动换行、自定义htm
vue element ui this.$alert 样式修改,长词自动换行.自定义htm vue element ui this.$alert 样式修改,长词自动换行.自定义html标签无效果问题 ...
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据（内容）
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据(内容) 能够解决的问题需要在表格中添加一个类似修改或编辑的按钮,按下按钮,弹出的窗口需要本行的渲染数据需要向服务端提交一 ...
element ui table组件扩展关于列表编辑按钮的位置放置
最近在用vue做项目,主要是用的element ui的组件,在用的过程中发现有部分组件需要扩展,改源码太折腾,成本高,就想着如何节省成本来实现这些需求,由于项目时间紧张,有些实现来也没来得及记录一下, ...
实战 | Element UI 父子组件传值与事件绑定（逆向）
这是小小本周的第四篇,本篇将会倒过来讲解Element UI 父子组件传值与事件绑定. 父子组件传值新建父组件和子组件新建父组件代码如下 <template><div id=& ...

Element UI——滚动条组件(ElScrollBar)修改.el-scrollbarwrap和el-scrollbarview的CSS属性

基本概念

源代码

问题分析

代码示例

运行效果

参考文章

Element UI——滚动条组件(ElScrollBar)修改.el-scrollbarwrap和el-scrollbarview的CSS属性相关推荐

最新文章

热门文章

Element UI——滚动条组件(ElScrollBar)修改.el-scrollbar__wrap和el-scrollbar__view的CSS属性

基本概念

源代码

问题分析

代码示例

运行效果

参考文章

Element UI——滚动条组件(ElScrollBar)修改.el-scrollbar__wrap和el-scrollbar__view的CSS属性相关推荐

最新文章

热门文章

Element UI——滚动条组件(ElScrollBar)修改.el-scrollbarwrap和el-scrollbarview的CSS属性

Element UI——滚动条组件(ElScrollBar)修改.el-scrollbarwrap和el-scrollbarview的CSS属性相关推荐