阅读(3956) (0)

ElementPlus Scrollbar 滚动条

2021-09-07 09:55:15 更新

Scrollbar 滚动条

用于替换浏览器原生滚动条。

基础用法


通过 ​height ​属性设置滚动条高度,若不设置则根据父容器高度自适应。

<template>
  <el-scrollbar height="400px">
    <p class="item" v-for="item in 20">{{ item }}</p>
  </el-scrollbar>
</template>

横向滚动


当元素宽度大于滚动条宽度时,会显示横向滚动条。

<template>
  <el-scrollbar>
    <div class="flex-content">
      <p class="item" v-for="item in 50">{{ item }}</p>
    </div>
  </el-scrollbar>
</template>

最大高度


当元素高度超过最大高度,才会显示滚动条。

<template>
  <el-button @click="add">添加元素</el-button>
  <el-button @click="delete">删除元素</el-button>
  <el-scrollbar max-height="400px">
    <p class="item" v-for="item in count">{{ item }}</p>
  </el-scrollbar>
</template>

<script>
  export default {
    data() {
      return {
        count: 3,
      }
    },
    methods: {
      add() {
        this.count++
      },
      delete() {
        if (this.count > 0) {
          this.count--
        }
      },
    },
  }
</script>

手动滚动


通过使用 ​setScrollTop ​与 ​setScrollLeft ​方法,可以手动控制滚动条滚动。

<template>
  <el-scrollbar ref="scrollbar" height="400px" always>
    <div ref="inner">
      <p class="item" v-for="item in 20">{{ item }}</p>
    </div>
  </el-scrollbar>

  <el-slider
    v-model="value"
    @input="inputSlider"
    :max="max"
    :format-tooltip="formatTooltip"
  ></el-slider>
</template>

<script>
  export default {
    data() {
      return {
        max: 0,
        value: 0,
      }
    },
    mounted() {
      this.max = this.$refs.inner.clientHeight - 380
    },
    methods: {
      inputSlider(value) {
        this.$refs.scrollbar.setScrollTop(value)
      },
      formatTooltip(value) {
        return `${value} px`
      },
    },
  }
</script>

Scrollbar Attributes

参数说明类型可选值默认值
height滚动条高度string / number
max-height滚动条最大高度string / number
native是否使用原生滚动条样式booleanfalse
wrap-style包裹容器的自定义样式string
wrap-class包裹容器的自定义类名string
view-style视图的自定义样式string
view-class视图的自定义类名string
noresize不响应容器尺寸变化,如果容器尺寸不会发生变化,最好设置它可以优化性能booleanfalse
tag视图的元素标签stringdiv
always滚动条总是显示booleanfalse
min-size滚动条最小尺寸number20

Scrollbar Events

事件名称说明回调参数
scroll滚动时触发的事件滚动距离 { scrollLeft, scrollTop }

Scrollbar Methods

方法名说明参数
setScrollTop设置滚动条到顶部的距离(scrollTop: number)
setScrollLeft设置滚动条到左边的距离(scrollLeft: number)
update手动更新滚动条状态