在项目中,总是需要用到滚动条,但windows浏览器默认的滚动条是很丑的,为了页面美观,可以考虑优化滚动条样式。 

vue Element UI官方文档上并没有放出滚动条相关的示例说明,但是实际上是有这么一个组件的,可查看源码。

<el-scrollbar></el-scrollbar>

将会出现滚动的内容放到上述标签内就可以了。 
这里要简单的设置一下,将标签的height设为100%,查看效果的时候,会出现一个横向的滚动条,如果你不想要横向的滚动条,使用下面css属性设置就可以只显示竖向滚动条。

.el-scrollbar__wrap {
overflow-x: hidden;
}

示例使用方法如下:

基于vue的滚动条组件之--element隐藏组件滚动条scrollbar使用的更多相关文章

  1. vue-amap | 基于 Vue 2.x 与高德的地图组件

    vue-amap | 基于 Vue 2.x 与高德的地图组件 参考:https://elemefe.github.io/vue-amap/#/

  2. element隐藏组件滚动条scrollbar使用

    可使用 组件 <el-scrollbar></el-scrollbar> 设置 组件的样式 为 高度100% <el-scrollbar style="heig ...

  3. Element隐藏组件:scrollbar

    scrollbar是用来替代浏览器原生滚动条的组件,element的文档中并没有对scrollbar的描述. 使用方法:以<el-scrollbar/>包裹要滚动的元素,并设置固定高度.在 ...

  4. 基于Vue的事件响应式进度条组件

    写在前面 找了很多Vue 进度条组件!,都不包含拖拽和点击事件,input range倒是原生包含input和change事件,但是直接基于input range做进度条的话,样式部分需要做大量调整和 ...

  5. 基于Vue简易封装的快速构建Echarts组件 -- fx67llQuickEcharts

    fx67llQuickEcharts A tool to help you use Echarts quickly! npm 组件说明 这本来是一个测试如何发布Vue组件至npm库的测试项目 做完之后 ...

  6. Vue项目中使用基于Vue.js的移动组件库cube-ui

    cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.很赞,基本场景是够用了,感谢开源!感谢默默奉献的你们. 刚爬完坑,就来总结啦!!希望对需要的朋友有小小的帮助. (一)创 ...

  7. 推荐几款基于vue的使用插件

    1.muse-ui ★6042 - 三端样式一致的响应式 UI 库 2.vuetify ★11169 - 为移动而生的Vue JS 2组件框架 3.Vux ★12969- 基于Vue和WeUI的组件库 ...

  8. 基于VUE开发项目

    前言 最近由于公司需要,需要写一个相对来说比较大型的后台管理系统.为了保证管理系统操作体验较为舒适并且项目后期益于维护,最后决定基于VUE全家桶来开发一个高度组件化的单页SPA应用. 技术选型 vue ...

  9. 基于vue,通过父组件触发子组件的请求,等请求完毕以后,显示子组件,同时隐藏父组件

    正常情况下,子组件应该尽量减少业务逻辑,而应该将业务逻辑放到父组件里面,从而减少耦合,但是当 我们不得不用到这种情况时,可以采用下面的思路 解决方案 尽量将请求单独作为一个函数(不要将请求放到show ...

随机推荐

  1. Slyce,这家硅谷创业公司的来头你知道吗

    Slyce,也许你没听过,一家硅谷创业公司,旨在帮助运动员和其他社会名流组织.优化社交媒体,过滤粉丝的声音,让明星更好的在社交媒体上和他们互动.但是如果如果说库里,那你应该就知道了,拿到了上届NBA总 ...

  2. oracle11g参数的简单查看方法

    1.查看processes和sessions参数show parameter processesshow parameter sessions 2.修改processes和sessions值alter ...

  3. 软件磁盘阵列(RAID)

    RAID软件磁盘阵列 RAID 即廉价磁盘冗余阵列,其高可用性和可靠性适用于大规模环境中,相比正常使用,数据更需要被保护.RAID 是将多个磁盘整合的大磁盘,不仅具有存储功能,同时还有数据保护功能. ...

  4. 4.5 基于STM32+MC20远程短信控制开关

    需要准备的硬件 MC20开发板 1个 https://item.taobao.com/item.htm?id=562661881042 GSM/GPRS天线 1根 https://item.taoba ...

  5. Network Basic Knowledge

    @1: 应用层的常用协议以及对应的端口号: DNS 53/tcp/udp SMTP 25/tcp POP3 110/tcp HTTP 80/tcp HTTPS 443/udp TELNET 23/tc ...

  6. Web Deploy 安装及问题解决

    注意: 站点名称:  服务器上IIS的站点名称.  . 我之前这里随便写一直不成功. 返回500..... 用户名, 密码:  这里最好用windows帐号. 问题比较少. 目标URL: 可不写. 可 ...

  7. javascript;Jquery;获取JSON对象,无刷新分页,异步加载,异步删除,实例。

    AjaxNewsList: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> < ...

  8. centos磁盘安装与磁盘分区方案

    概述 关于centos分区的相关知识 无论怎么分区并不会影响系统文件目录的布局,如果只分/和swap这两个区 没有 usr , var , etc 等分区,在安装好后文件根目录里依然会有usr , v ...

  9. linux音频 DAPM之二:audio paths与dapm kcontrol

    转:https://blog.csdn.net/wh_19910525/article/details/12749293 在用alsa_amixer controls时,除了我们之前提到的snd_so ...

  10. Shell编程之Expect自动化交互程序

    一.Expect自动化交互程序 1.spawn命令 通过spawn执行一个命令或程序,之后所有的Expect操作都会在这个执行过的命令或程序进程中进行,包括自动交互功能. 语法: spawn [ 选项 ...