Element 自定义bar

217 阅读1分钟

使用原因

由于浏览器自带的滚动样式不太没关。element中自带的比较美观。

部分代码

<el-scrollbar :native="false" wrapStyle="" wrapClass="" viewClass="" viewStyle="" :noresize="false" tag='p'>
    <p v-for="(item, index) in 200" :key="index">自定义滚动条。</p>
</el-scrollbar>

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

实际效果