element滚动条组件el-scrollbar的使用详解

element官网文章中没有介绍滚动条的使用方式，但是官方滚动条源码中有滚动条的样式代码

样式效果

使用方法

页面中引入 el-scrollbar 组件

<el-scrollbar style="height: 100%">
      <!-- 滚动条要包裹的内容 -->
      <div class="container"> 占位</div>
</el-scrollbar>

el-scrollbar 组件有以下几个模块的内容：

  • el-scrollbar ：需要指定高度
  • el-scrollbar__wrap：包裹滚动区域
  • el-scrollbar__bar is-horizontal：横向滚动条
  • el-scrollbar__bar is-vertical：纵向滚动条

如果不需要横向滚动条（不加scoped）

<style lang="scss">
/* element滚动条组件 隐藏水平滚动条 */
.sidebar-wrapper .el-scrollbar__wrap {
  overflow-x: hidden;
}
.is-horizontal {
  display: none;
}
</style>

方式二：如果 滚动条组件用在 Layout.vue 组件中，请不要在 Layout.vue 中引入隐藏横向滚动条的 css 样式，这会影响后续如 下拉选择框的滚动条样式
解决方法：创建一个 css 文件，在 Layout.vue 中单独引入css 文件，记得加上 Layout.vue 中滚动条组件的父级 class 类，避免影响后面的样式

// common.css
/* element滚动条组件 隐藏水平滚动条 */
.sidebar-wrapper .el-scrollbar__wrap {
    overflow-x: hidden;
  }

Layout.vue

<style lang="scss" scoped>
@import "../assets/css/common.css";
...
</style>

到此这篇关于element滚动条组件el-scrollbar的使用详解的文章就介绍到这了,更多相关element滚动条组件el-scrollbar内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 关于element-ui的隐藏组件el-scrollbar的使用

    虽然在官方文档中没有给出这个组件,但是在源码中是有的.所以我们可以直接使用: <el-scrollbar></el-scrollbar> 但是我们需要微调一下样式,两种情况的演示代码如下: 已知内容高度 <div style='height:800px'> <el-scrollbar class='page-component__scroll'></el-scrollbar> <div> <style> .page-com

  • Vue+Element switch组件的使用示例代码详解

    Vue+Element switch组件的使用示例代码详解

    代码如下所示: <el-table-column label="商品状态" align="center"> <template slot-scope="{row}"> <el-switch v-model="row.goods_state" class="switch" :active-value="1" :inactive-value="0&qu

  • element滚动条组件el-scrollbar的使用详解

    element滚动条组件el-scrollbar的使用详解

    element官网文章中没有介绍滚动条的使用方式,但是官方滚动条源码中有滚动条的样式代码 样式效果 使用方法 页面中引入 el-scrollbar 组件 <el-scrollbar style="height: 100%"> <!-- 滚动条要包裹的内容 --> <div class="container"> 占位</div> </el-scrollbar> el-scrollbar 组件有以下几个模块的内

  • vue组件间通信子与父详解（二）

    接着vue组件父与子通信详解继续学习. 二.组件间通信(子组件传值给父组件) 通过事件的方式来完成数据的传输. ①在父组件中 定义一个方法,用来接收子组件所通过事件传来的值 methods:{ recvMsg:function(msg){ //参数msg就是子组件通过事件出来的数据 } } ②绑定事件处理函数 事件一般情况 都是自定义事件 <child-component @myEvent="recvMsg"></child-component> ③在子组件触发

  • 为Vue3 组件标注 TS 类型实例详解

    目录 为 props 标注类型 使用 <script setup> 非 <script setup> 为 emits 标注类型 使用 <script setup> 非 <script setup> 为 ref() 标注类型 默认推导类型 通过接口指定类型 通过泛型指定类型 为 reactive() 标注类型 默认推导类型 通过接口指定类型 为 computed() 标注类型 默认推导类型 通过泛型指定类型 为事件处理函数标注类型 为 provide / in

  • Message组件实现发财UI 示例详解

    Message组件实现发财UI 示例详解

    目录 引言 支持的功能 使用方法 实现过程 如何实现不同类型的切换? 如何实现Message的弹出和消失? 如何实现往下排列而非堆叠? 如何实现添加和移除.message-active类? 如何将隐藏的Message从DOM树中移除 如何区分不同的Message? 最后的一个小细节 引言 最近在实现Message组件,就是会从屏幕顶端弹出的一个小提醒,过一会儿就消失了.我个人非常喜欢这个设计,感觉在后续的复用性也很高,于是就打算自己手写一个作为发财UI的组件 支持的功能 目前的Message有四

  • JSP中EL表达式的用法详解(必看篇)

    EL 全名为Expression Language EL 语法很简单,它最大的特点就是使用上很方便.接下来介绍EL主要的语法结构: ${sessionScope.user.sex} 所有EL都是以${为起始.以}为结尾的.上述EL范例的意思是:从Session的范围中,取得 用户的性别.假若依照之前JSP Scriptlet的写法如下: User user =(User)session.getAttribute("user"); String sex =user.getSex( );

  • vuejs动态组件给子组件传递数据的方法详解

    通过子组件定义时候的props可以支持父组件给子组件传递数据,这些定义的props在子组件的标签中使用绑定属性即可,但是如果使用的是<component>动态组件,这个时候就没有显式的子组件标签,要给子组件传递数据需要在<component> 中进行绑定 <div class="app" id="deviceready"> <component :is="currentView" :user_name.s

  • COM组件中调用JavaScript函数详解及实例

    COM组件中调用JavaScript函数详解及实例 要求是很简单的,即有COM组件A在IE中运行,使用JavaScript(JS)调用A的方法longCalc(),该方法是一个耗时的操作,要求通知IE当前的进度.这就要求使用回调函数,设其名称为scriptCallbackFunc.实现这个技术很简单: 1 .组件方(C++) 组件A 的方法在IDL中定义: [id(2)] HRESULT longCalc([in] DOUBLE v1, [in] DOUBLE v2, [in, optional

  • jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解

    jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解

    简单的两个步骤即可实现分页功能 <script src="<%=basePath%>/resources/js/jquery-1.7.1.min.js"></script> <script src="<%=basePath%>/resources/js/jquery.loehpagerv1.0.js"></script> <script type="text/JavaScript

  • jQuery EasyUI 组件加上“清除”功能实例详解

    jQuery EasyUI 组件加上“清除”功能实例详解

    1.背景 在使用 EasyUI 各表单组件时,尤其是使用 ComboBox(下拉列表框).DateBox(日期输入框).DateTimeBox(日期时间输入框)这三个组件时,经常有这样的需求,下拉框或日期只允许选择.不允许手动输入,这时只要在组件选项中加入 editable:false 就可以实现,但有一个问题,就是:一旦选择了,没办法清空.经过研究,可以用一个变通的解决方案:给组件加上一个"清除"按钮,当有值是,显示按钮,点击按钮可清空值,当无值是,隐藏按钮. 2.函数定义 定义JS

随机推荐