element ui 滚动条插件
<el-scrollbar></el-scrollbar>
用的时候加个高度就行了
不喜欢用这个用下面这个 在一个博客看到的还不错!
先张贴一张效果图:
说明:这里会出现横向滚动条,是因为默认是开启横向滚动条的,并且内容区域高度超出了外层盒子的宽度
下面介绍使用方法:
1、安装vue-happy-scroll
推荐使用npm安装,这样可以跟随你的webpack
配置去选择怎样打包
npm install vue-happy-scroll --save-dev
当然,你也可以选择使用script标签的方式引入
<!-- 引入css,该链接始终为最新版的资源 --> <link rel="stylesheet" href="https://unpkg.com/vue-happy-scroll/docs/happy-scroll.css"> <!-- 引入vue --> <!-- 引入组件,该链接始终为最新版的资源 --> <script src="https://unpkg.com/vue-happy-scroll/docs/happy-scroll.min.js"></script>
2、注册组件
在main.js文件中编写一下代码段:
import Vue from 'vue' import { HappyScroll } from 'vue-happy-scroll' //自定义组件名 Vue.component('happy-scroll', HappyScroll) // 引入css import 'vue-happy-scroll/docs/happy-scroll.css'
3、vue组件中使用
在这里就以我的小项目为例,在dashboard.vue文件中写入如下代码,使用happy-scrool标签就可以使用滚动条了
<template><div><h3>仪表盘</h3><!-- 外层盒子 --><div style="height:200px;width:300px;background-color:#ccc;"><!-- 这里的标签名称要和main.js文件中定义的组件名称保持一致 --><happy-scroll color="rgba(0,0,0,0.5)" size="5"><!-- 内层盒子——内容区 --><div class="con"><p>士大夫撒入个任务二个人合同不大废物个人都怕顺风耳个二级gap所爱速发sure欧若尔奥沙是否</p><p>士大夫撒入个任务二个人合同不大废物个人都怕顺风耳个二级gap所爱速发sure欧若尔奥沙是否</p><p>士大夫撒入个任务二个人合同不大废物个人都怕顺风耳个二级gap所爱速发sure欧若尔奥沙是否</p><p>士大夫撒入个任务二个人合同不大废物个人都怕顺风耳个二级gap所爱速发sure欧若尔奥沙是否</p><p>士大夫撒入个任务二个人合同不大废物个人都怕顺风耳个二级gap所爱速发sure欧若尔奥沙是否</p><p>士大夫撒入个任务二个人合同不大废物个人都怕顺风耳个二级gap所爱速发sure欧若尔奥沙是否</p><p>士大夫撒入个任务二个人合同不大废物个人都怕顺风耳个二级gap所爱速发sure欧若尔奥沙是否</p><p>士大夫撒入个任务二个人合同不大废物个人都怕顺风耳个二级gap所爱速发sure欧若尔奥沙是否</p><p>士大夫撒入个任务二个人合同不大废物个人都怕顺风耳个二级gap所爱速发sure欧若尔奥沙是否</p><p>士大夫撒入个任务二个人合同不大废物个人都怕顺风耳个二级gap所爱速发sure欧若尔奥沙是否</p></div></happy-scroll></div></div> </template>
由于在这里,没有针对class为con的div标签单独设置宽度,所以默认宽度就是和外层盒子宽度一样,所以就不会出现横向滚动条了(当然如果当内部盒子宽度超出外层盒子,就会出现横向滚动条了),效果图如下:
4、常用属性说明
该插件可以配置常用的滚动条颜色、粗细、竖向滚动条是左还是右边显示、横向滚动条是上还是下边显示、滚动条是否开启监听容器大小变化等属性。
在这里我只写两个我可能最常用的属性:颜色、大小。
4.1、滚动条颜色:color属性
设置滚动条颜色的属性为color,直接在标签上添加即可,在上面代码中,我已经添加了color属性的值为半透明的黑色滚动条(rgba(0,0,0,0.5)),也可以使用颜色单词,
例如<happy-scroll color="red">
4.2、滚动条粗细:size属性
设置滚动条粗细尺寸的属性为size,直接在标签上添加即可,其中默认值是4,例如当我设置size="10"的时候,
<happy-scroll color="red" size="10">
4.3、是否开启监听容器大小变化:resize属性
开启监听容器大小变化的属性名为resize,直接在标签上添加即可,<happy-scroll color="red" size="10" resize> ,这样,当你因为点击页面操作时,如果内容区的宽高变化了,滚动条的长短也会相应的变化(happy-scroll标签内的第一层标签开始就是内容区,这里是class为con的div)
例如:假设点击页码某一个地方后,div.con的高度变成了2000px:
<happy-scroll color="red" size="5" resize><div class="con" style="height:2000px;">
则滚动条效果为如图:
还有其他更多属性,这里就不再一一介绍说明,需要了解更详细的内容,可以参考该插件的开发者的github地址:https://github.com/happy-js/vue-happy-scroll
element ui 滚动条插件相关推荐
- Vue + Element UI——滚动条el-scrollerbar和无限滚动指令v-infinite-scroll整合解决方案
基本概念 el-scrollbar:Element UI隐藏组件. 注意事项: 1.el-scrollbar的父层要有固定高度 2.el-scrollbar的高度要设成100% 3.如果出现横滚动条, ...
- Element UI——滚动条组件(ElScrollBar)修改.el-scrollbar__wrap和el-scrollbar__view的CSS属性
基本概念 el-scrollbar:Element UI隐藏组件. 注意事项: 1.el-scrollbar的父层要有固定高度 2.el-scrollbar的高度要设成100% 3.如果出现横滚动条, ...
- vscode element ui 提示 插件
element-UI本身不难,但是vscode里面没有语法提示,对于写提示性的语句时真的太难受了. 我在vscode里找到了应该提示很强的elementUI提示库,Element UI Snippet ...
- vue element ui 滚动条
隐藏横滚动条 overflow-x: hidden; 设置高度 height: 700px; 代码 vue <template><!-- 滚动条 --><el-scrol ...
- vue项目,引入插件element ui 样式不生效
用vue ui 命令 引入插件 element ui 样式不生效 步骤一:执行如下命令,安装babel-plugin-component npm install babel-plugin-compon ...
- 解决vue-admin-template插件element UI组件默认英文改中文
其实vue-admin-template这个框架原来就有的 1.element UI里的组件改中文模式如图: src/main.js: 2.第三方插件如tinymic这个富文本插件改成中文显示,上面方 ...
- 使用element ui 的日期插件搜索清空时报错
1.先贴上一张图,供您看一看 Error in v-on handler: "TypeError: Cannot read property '0' of null" 我这报错报了 ...
- Element UI Dialog 对话框改成固定高度,超出部分滚动条滚动
问题描述 elememt ui 中的el-dialog对话框如果内容过多高度会被无限拉长.要将其设置成固定高度,此处我设置的是页面总高度的80%,内容过多时在对话框内出现滚动条.但是这样设置会造成高度 ...
- Element ui table组件滚动条隐藏与样式修改
Element ui 虽然用起来方便,但是调整就比较麻烦了,尤其是这个table组件,一旦设定了height属性,数据多的时候就会自动出现滚动条,如果你改了其他的样式,这个滚动条就是十分难看,可以用下 ...
最新文章
- 模组使用之NB-IoT模组的工作模式、PSM、DRX和eDRX状态说明
- python学习之老男孩python全栈第九期_day002作业
- db2 replace函数的用法_SQL基础知识:常用字符处理函数
- 概率图模型中信念传播
- laravel 导出插件
- 腾讯地图 qq.map 设置鼠标样式
- 诗与远方:无题(八十七)
- CMake 手册详解(十八)
- 笔记︱范数正则化L0、L1、L2-岭回归Lasso回归(稀疏与特征工程)
- 高通camx clock配置
- Atitit.提升软件稳定性---基于数据库实现的持久化 循环队列 环形队列
- ssm毕设项目高校饭堂管理系统8gmjo(java+VUE+Mybatis+Maven+Mysql+sprnig)
- 教你给视频画面打马赛克
- L3MON-远程Android管理套件环境搭建
- 三菱plc pwm指令_【三菱PLC指令教程】定时器指令应用之时序图编程法(一)
- echarts 饼状图渐变色
- (附源码)spring boot校园购物网站 毕业设计041037
- 服务器UDIMM、LRDIMM、RDIMM三种内存的区别
- 力扣-两数之和 (梦开始的地方)
- mysql inet aton ipv6_在MySQL中存储IPv6地址