当前位置： ag凯发k8国际 > 前端技术 > css >内容正文

css

element ui——滚动条组件(elscrollbar)修改.el-ag凯发k8国际

发布时间：2024/10/5 css 8 豆豆

ag凯发k8国际收集整理的这篇文章主要介绍了 element ui——滚动条组件(elscrollbar)修改.el-scrollbar__wrap和el-scrollbar__view的css属性小编觉得挺不错的,现在分享给大家,帮大家做个参考.

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 = ({ [view] }

);let nodes;if (!this.native) {nodes = ([wrap,,]);} else {nodes = ([{ [view] }

]);}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必须以分号;结尾。

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

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

总结

以上是ag凯发k8国际为你收集整理的element ui——滚动条组件(elscrollbar)修改.el-scrollbar__wrap和el-scrollbar__view的css属性的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得ag凯发k8国际网站内容还不错，欢迎将ag凯发k8国际推荐给好友。