基于vue的滚动条组件之--element隐藏组件滚动条scrollbar使用
在项目中,总是需要用到滚动条,但windows浏览器默认的滚动条是很丑的,为了页面美观,可以考虑优化滚动条样式。
vue Element UI官方文档上并没有放出滚动条相关的示例说明,但是实际上是有这么一个组件的,可查看源码。
<el-scrollbar></el-scrollbar>
将会出现滚动的内容放到上述标签内就可以了。
这里要简单的设置一下,将标签的height设为100%,查看效果的时候,会出现一个横向的滚动条,如果你不想要横向的滚动条,使用下面css属性设置就可以只显示竖向滚动条。
.el-scrollbar__wrap {
overflow-x: hidden;
}
示例使用方法如下:

基于vue的滚动条组件之--element隐藏组件滚动条scrollbar使用的更多相关文章
- vue-amap | 基于 Vue 2.x 与高德的地图组件
vue-amap | 基于 Vue 2.x 与高德的地图组件 参考:https://elemefe.github.io/vue-amap/#/
- element隐藏组件滚动条scrollbar使用
可使用 组件 <el-scrollbar></el-scrollbar> 设置 组件的样式 为 高度100% <el-scrollbar style="heig ...
- Element隐藏组件:scrollbar
scrollbar是用来替代浏览器原生滚动条的组件,element的文档中并没有对scrollbar的描述. 使用方法:以<el-scrollbar/>包裹要滚动的元素,并设置固定高度.在 ...
- 基于Vue的事件响应式进度条组件
写在前面 找了很多Vue 进度条组件!,都不包含拖拽和点击事件,input range倒是原生包含input和change事件,但是直接基于input range做进度条的话,样式部分需要做大量调整和 ...
- 基于Vue简易封装的快速构建Echarts组件 -- fx67llQuickEcharts
fx67llQuickEcharts A tool to help you use Echarts quickly! npm 组件说明 这本来是一个测试如何发布Vue组件至npm库的测试项目 做完之后 ...
- Vue项目中使用基于Vue.js的移动组件库cube-ui
cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.很赞,基本场景是够用了,感谢开源!感谢默默奉献的你们. 刚爬完坑,就来总结啦!!希望对需要的朋友有小小的帮助. (一)创 ...
- 推荐几款基于vue的使用插件
1.muse-ui ★6042 - 三端样式一致的响应式 UI 库 2.vuetify ★11169 - 为移动而生的Vue JS 2组件框架 3.Vux ★12969- 基于Vue和WeUI的组件库 ...
- 基于VUE开发项目
前言 最近由于公司需要,需要写一个相对来说比较大型的后台管理系统.为了保证管理系统操作体验较为舒适并且项目后期益于维护,最后决定基于VUE全家桶来开发一个高度组件化的单页SPA应用. 技术选型 vue ...
- 基于vue,通过父组件触发子组件的请求,等请求完毕以后,显示子组件,同时隐藏父组件
正常情况下,子组件应该尽量减少业务逻辑,而应该将业务逻辑放到父组件里面,从而减少耦合,但是当 我们不得不用到这种情况时,可以采用下面的思路 解决方案 尽量将请求单独作为一个函数(不要将请求放到show ...
随机推荐
- android自定义控件(三)ProgressBar
1.ProgressBar有两个进度,一个是android:progress,另一个是android:secondaryProgress.比如视频的缓存进度以及播放进度. 在这里缓存的进度就可以是a ...
- Android 开发之:Intent.createChooser() 妙用
大家对该功能第一印象就是ApiDemo 里面的 其只有区区几行代码 提取为: Intent intent = new Intent(Intent.ACTION_GET_CONTENT); inten ...
- Ip-san 配置过程
1:SAN的定义 SAN是storage area network(存储区域网络)的简写,早期的san采用的是光纤通道技术,后期当iscsi协议出现以后,为了区分两者,就划分了IP SAN和FC SA ...
- Swift 学习 用 swift 调用 oc
开发过程中 很可能 把swift不成熟的地方用成熟的oc 代码来弥补一下 , 下面简单来学习一下,我也是照着视频 学习的 卖弄谈不上 就是一次学习笔记, 具体问题还是具体分析吧. 需求 给展出出来的 ...
- Redis的分布式配置
Redis存在三种级别的分布式部署:主从复制.主从切换.集群配置,推荐使用主从切换模式. 主从复制 启动主服务:端口6379 启动从服务:端口6380, 配置文件中加上 slaveof 127.0.0 ...
- linux下安装mysql遇到的一些问题
安装命令: groupadd mysql useradd -r -g mysql -s /bin/false mysql cd /usr/local tar zxvf /path/to/mysql-V ...
- python__Django 分页
自定义分页的类: #!/usr/bin/env python # -*- coding: utf-8 -*- # Created by Mona on 2017/9/20 from django.ut ...
- h5新特性 File API详解
之前一直觉得h5的新特性就是一些新标签呢,直到想研究一下图片上传预览的原理,才发现还是有好多新的api的,只是不兼容ie低版本,挺可惜的, File API在表单中文件输入字段基础上,又添加了一些直接 ...
- 优美的英文诗歌Beautiful English Poetry
<When you are old>——<当你老了> --- William Butler Yeats ——威廉·巴特勒·叶芝When you are old and grey ...
- PS小研
1 ps输入字体不显示原因有很多,解决方法也各不相同,我总结了以下几条原因及相应的解决方法 原因一: 字体颜色和背景色相同或者过于相近,字体虽然存在,但是却看不到字体. 解决方法: 这个问题比较简单, ...