Element scrollbar 使用封装

前言

最近进行 Element UI 组件封装，在之前的项目中经常用到 el-scrollbar 这个内置组件，这次单独封装时遇到点写法上的小问题，做个记录和分享，希望能帮到相关的开发者。

使用 el-scrollbar

el-scrollbar 在 Element 组件官方文档中没有，在 node_modules 中可以看到，目录位置 node_modules/element-ui/packages/scrollbar

scrollbar.png

在 Vue 页面中直接引入 el-scrollbar 标签，定义对应的高度就可以实现 element 官方的滚动条效果

  <el-scrollbar style="height: 100px;">
    <div style="height: 200px;">
     ...
    </div>
  </el-scrollbar>

这时候，默认效果的纵向滚动条有了，但是横向会出现浏览器默认的滚动条占位，如下效果

scrollbar2.png

默认的横向滚动条隐藏可以设置 el-scrollbar__wrap 类属性为 overflow-x: hidden; 移除， el-scrollbar__wrap 属性可以在浏览其中查看元素看到，在自定义的元素内部，选择元素后在 style 添加 overflow-x: hidden; 即可查看移除默认滚动条的效果

scrollbar3.png

在我们的项目组件封装过程中，这个组件的属性设置需要在 <style> 中设置，**注意** 默认 css 默认下不能添加 scoped 属性才能正常生效（这里花了我半个小时才弄出来效果）, 写法如下

<template>
  <el-scrollbar>
    <slot></slot>
  </el-scrollbar>
</template>

<script>
export default {
  name: 'Scrollbar',
}
</script>
<style>
/*隐藏水平滚动条*/
.el-scrollbar__wrap {
  overflow-x: hidden !important;
}
</style>

有的项目里 <style> 标签里如果使用了 scss 并且使用了 scoped 属性的话，需要使用 deep 操作符. 这里可以查看官方说明 https://vue-loader.vuejs.org/zh/guide/scoped-css.html , 如下写法

<template>
<el-scrollbar class="content-scroll">
  <div>...</div>
</el-scrollbar>

</template>

<style lang="scss" scoped>
.content-scroll {
  height: 300px;
  ::v-deep {
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
}

</style>

项目中大部分使用 el-scrollbar 默认使用纵向滚动条效果，在我们项目里的 tag 页签功能区使用了横向滚动条，隐藏了纵向滚动条，由于自定义的需求，在实际使用时需要根据情况设置对应的边距问题，这里调整的时候还需要隐藏原生滚动条，这时候需要耐心一点才能调出想要的页面效果。