Element-ui中ElScrollBar组件滚动条的使用
在翻看 element-ui官网的文档时,发现其左侧导航和右边的内容超出屏幕时,滚动条的样式比较小巧,通过浏览器审查工具查看,发现它是使用了el-scrollbar的样式,跟element-ui的组件样式命名一致。但文档中并没有关于这个 scrollbar组件的使用文档,搜索一番得知这是一个隐藏组件,官方在 github 的 issues 中表示不会写在文档中,需要用的自己看源码进行调用。
1、使用
按需加载需要单独加载Scrollbar组件、并使用(可能会报无Scrollbar类的错误,但不影响使用),el-scrollbar需要设height(max-height是不行的)
<el-scrollbar :native="false">
<div>
<p v-for="(item, index) in 200" :key="index">{{index}} 这里是一些文本。</p>
</div>
<el-scrollbar>
2、配置参数
props: {
native: Boolean, // 是否使用本地,设为true则不会启用element-ui自定义的滚动条
wrapStyle: {}, // 包裹层自定义样式
wrapClass: {}, // 包裹层自定义样式类
viewClass: {}, // 可滚动部分自定义样式类
viewStyle: {}, // 可滚动部分自定义样式
noresize: Boolean, // 如果 container 尺寸不会发生变化,最好设置它可以优化性能
tag: { // 生成的标签类型,默认使用 `div`标签包裹
type: String,
default: 'div'
}
}
3、源码位置
源码在node_modules
目录下的 element-ui/packages/scrollbar
模块入口index.js,从main导入 scrollbar并提供一个安装方法注册成全局组件
注意:隐藏X轴滚动条时,加上前缀,否则会影响el-select的下拉框样式。
.el-scrollbar__wrap {
overflow-x: hidden;
}
4、监听滚动位置
<el-scrollbar id="main" class="app-main" ref="myScrollbar">
<div class="content">
<h3>顶部</h3>
</div>
<div class="content">
<h3>Transfer 穿梭框</h3>
</div>
<div class="content">
<h3>Form 表单</h3>
</div>
<div class="content">
<h3>Table 表格</h3>
</div>
<div class="content">
<h3>Tag 标签</h3>
</div>
</el-scrollbar>
new Vue({
el: '#app',
data: function() {
return { visible: false }
},
mounted() {
this.handleScroll()
},
methods: {
handleScroll() {
let _self = this
let scrollbarEl = this.$refs.myScrollbar.wrap
scrollbarEl.onscroll = function() {
if(scrollbarEl.scrollTop > 200) {
_self.visible = true
} else {
_self.visible = false
}
}
},
}
})
Element-ui中ElScrollBar组件滚动条的使用的更多相关文章
- 关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
- vue+element ui中select组件选择失效问题原因与解决方法
codejing 2020-07-10 09:13:31 652 收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...
- Element UI 中组件this.$message报错
最近在做毕设的时候,用Element UI中的消息提示message一直报以下的错误: 展示的效果也不好看,没有图标什么的: 但我明明有在main.js引入了element-ui 呀,因为毕设时间很赶 ...
- 关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...
- vue问题三:element ui的upload组件上传图片成功和移除事件
element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...
- AmazeUI(妹子UI)中CSS组件、JS插件、Web组件的区别
AmazeUI(妹子UI)是非常优秀的国产前端UI,现在来介绍一下AmazeUI中CSS组件.JS插件与Web组件的区别. CSS组件顾名思义就是仅使用CSS渲染而成的组件,而JS插件也很容易理解,就 ...
- element ui 中的 resetFields() 报错'resetFields' of undefined
每次做各种form表单时,首先要注意的是初始化,但是刚开始若没有仔细看文档,则会自己写个方法将数据设置为空,但是这样就会出现一个问题,表单内存在各种验证,假如是一个弹框内有form表单,弹框出现就执行 ...
- element ui中的一些小技巧
最近写公司的项目,这项目是vue和element ui搭建的, 做的是一套电力系统的管理平台. 遇到一个小麻烦,用过element ui 的都知道,使用element ui 弹框,点击空白处,默认是 ...
- Element ui 中使用table组件实现分页记忆选中
我们再用vue和element-ui,或者其他的表格的时候,可能需要能记忆翻页勾选,那么实现以下几个方法就ok了 示例如下 <el-table :data="tableData&quo ...
随机推荐
- Cypress 之 常用API
.visit() 访问一个远程URL.>>详情参考 Cypress 之 cy.visit() cy.visit(url) cy.visit(url, options) cy.visit(o ...
- 好用的js片段收藏
1.判断浏览器信息,如果是手机,就跳到手机页面 if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { wind ...
- 【JS简洁之道小技巧】第一期 扁平化数组
介绍两种方法,一是ES6的flat,简单粗暴.二是递归,也不麻烦. flat ES6自带了flat方法,用于使一个嵌套的数组扁平化,默认展开一个嵌套层.flat方法接收一个数字类型参数,参数值即嵌套层 ...
- 关于kubernetes我们还有什么可做的?
kubernetes在容器编排大战中由于应用的可移植性以及支持混合云/多云部署方式上的灵活性.加上开放可扩展的理念,使得周边社区非常活跃.从既有调研结果看,kubernetes已成为容器编排领域的标准 ...
- json对象中的变量存在空格的取值办法
写一个json对象,但需求需要是带空格的键,定义的话很容易定义,只需要双引号引起来即可,但取值的时候怎么取,直接写 会报错,所以就有了下边的办法 <el-form-item label=&quo ...
- 「SAP技术」已启用质检物料创建PO时候'STOCK TYPE'没有默认为X?
「SAP技术」 SAP MM 已启用质检物料创建PO时候'STOCK TYPE'没有默认为X? Part I:SAP 标准行为 1, 物料11002335, QM视图里 01 inspection t ...
- Android studio将一个项目作为module导入另一个项目
有两个Android项目,一个为pozhudl,一个为app,现在欲将pozhudl项目作为module导入到app中,并调用pozhudl项目中的类 先在pozhudl项目的build.gradle ...
- Linux shell--基础指令
Linux shell--基础指令 浏览Linux文件系统 Linux中最基础也是最必要的一条指令 cd destination cd命令可接受单个参数destination,用以指定想切换到的目录名 ...
- SSH远程管理
目录 SSH远程管理 ssh功能 SSH相关命令 Xshell连接不上虚拟机 scp命令 SSH验证方式 优化 免交互expect[扩展] 免交互sshpass[扩展] 简易跳板机 小结 SSH远程管 ...
- Checklist for an RMAN Restore (Doc ID 1554636.1)
Checklist for an RMAN Restore (Doc ID 1554636.1) APPLIES TO: Oracle Database - Enterprise Edition - ...