elementui组件—— el-scroll的使用

项目开发中使用到了elementui组件，后期发现浏览器中的滚动条不仅占宽，还与页面暗色风格不搭配。于是打算寻找一款插件使用，而elementui中的scroll组件刚好满足需要而且兼容ie10+。

官网侧边栏中scroll的使用截图

使用方法

直接在页面中调用el-scroll组件

<el-scrollbar style="height: 325px;width: 300px;"><!-- 具体要包裹的内容 --> <div style="width: 500px;height: 370px;line-height: 300px;text-align: center;"> 占位</div>
</el-scrollbar>

页面内渲染出的dom结构可以看出，组件内总共有三块内容

最外层：el-scrollbar。使用时需要指定高度和宽度
第一块代码：el-scroll__wrap：
1).overflow:scroll是写在这里的，通过margin为负，将浏览器中的原始滚动条排除视觉内隐藏掉。
2).el-scroll__view包裹滚动区域
第二块代码：el-scroll__bar is-horizontal: 横向滚动条
第三块代码：el-scroll__bar is-vertical: 纵向滚动条

组件的自定义属性

根据官网的scroll组件源码，可以看到scroll组件是有几个属性可以传入的。具体使用可以自己研究下，主要就是传入自定义样式和class，注意自定义stlye接收的是数组类型。

举栗子：

 <el-scroll:view-class="'the-view-class'" :wrap-style="[{height:'300px'},{width:'300px'}]":wrap-class="'the-wrap-class'"></el-scroll>

elementui组件—— el-scroll的使用相关推荐

通过cmd和npm指令，快速引入element-ui组件
如何通过 cmd和 npm指令,在新建 vue.js项目中,快速引入 Element-ui组件 ? 范例 - 项目路径截图参考: 流程说明: 新建项目文件夹,命名如: m2-vue-element 启 ...
Vue引入并使用Element-UI组件库的两种方式
前言在开发的时候,虽然我们可以自己写css或者js甚至一些动画特效,但是也有很多开源的组件库帮我们写好了.我们只需要下载并引入即可. vue和element-ui在开发中是比较般配的,也是我们开发中 ...
Element-UI组件之其他Others
Element-UI组件之其他Others Dialog 对话框基本用法自定义内容嵌套的 Dialog 居中布局 Tooltip 文字提示基础用法主题更多 Content 高级扩展 Pop ...
Vue（四）：element-ui组件用法、表单验证、图标引入、webpack目录配置指向、export暴露方法
目录 1.element-ui组件用法 2.表单验证(复制的默认样式) 3.图标引入 4.webpack目录配置指向 5.export暴露方法 1.element-ui组件用法这里先补充一下安装依赖 ...
elment上传pdf文件至服务器,基于element-ui组件手动实现单选和上传功能.pdf
基基于于element-ui组组件件手手动动实实现现单单选选和和上上传传功功能能在用户使用过程中提出一键导入的功能,需求如下:点击导入按钮显示提示框,然后是单选框以及上传按钮.这篇文章要介绍了基 ...
Vue第二章，在项目中使用element-ui组件
使用vue的童鞋相信都知道vue中有很多ui组件,这里推荐使用element-ui组件(个人测试还算强大,起码开发商野心不小),因为此组件可以集成到angular.react.vue任意一个框架中. ...
ElementUI 组件库 md-loader 的解析和优化
大家好,我是若川.最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 参与,已进行三个月了,大家一起交流学习,共同进步. 背景相信很多同学在学习 webpack 的时候,对 load ...
[vue-element] 你有二次封装过ElementUI组件吗？
[vue-element] 你有二次封装过ElementUI组件吗? popover + button 的组件,点击该按钮后还有个二次确认或选择的交互. InfiniteScroll 封装个简单的带触 ...
前端学习（2740）：重读vue电商网站50之Element-UI 组件按需加载
通过 CDN 优化 ElementUI 的打包虽然在开发阶段,我们启用了 element-ui 组件的按需加载,尽可能的减少了打包的体积,但是那些被按需加载的组件,还是占用了较大的文件体积.此时,我 ...

elementui组件—— el-scroll的使用

使用方法

组件的自定义属性

elementui组件—— el-scroll的使用相关推荐

最新文章

热门文章