element的隐藏组件滚动条el-scrollbar(官网没有文档说明)

在熟悉项目代码的时候，发现了element一个新的组件scrollbar，查了下官方文档，并没有详细的说明，百度出来的倒不少，而且做出来的效果也好看，，鼠标经过的时候才会显示，简单美观。

项目main.js中引用element:
import ElementUI from ‘element-ui’;
然后就可以直接写页面了。

<el-tab-pane class="plan-select_pane" label="未开始" name="0" v-loadmore="loadMore"> //设置宽高，内层的内容充满，设置el-scrollbar的高度
  <el-scrollbar tag="ul" wrap-class="el-select-dropdown__wrap" view-class="el-select-dropdown__list" ref="scrollbar">
    <ul class="plan-select-group" v-if="examPlanList.length > 0">
      <li class="plan-select-dropdown__item" v-for="item in examPlanList" :key="item.id" 
      :title="item.examName" @click="selectPlan(item)"
      :class="{
      'selected': curExamPlan.id == item.id,
      'is-disabled': disabled
      }">{{ item.examName }}</li>
    </ul>
    <div class="no-message" v-else>暂无数据</div>
  </el-scrollbar>
</el-tab-pane>

el-scrollbar组件的props属性（可查看element源码）：

props: {
 native: Boolean, // 是否使用本地，设为true则不会启用element-ui自定义的滚动条
 wrapStyle: {}, // 包裹层自定义样式
 wrapClass: {}, // 包裹层自定义样式类
 viewClass: {}, // 可滚动部分自定义样式类
 viewStyle: {}, // 可滚动部分自定义样式
 noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
 tag: { // 生成的标签类型，默认使用 `div`标签包裹
  type: String,
  default: 'div'
 }
}