ElementPlus Scrollbar 滾動(dòng)條

Scrollbar 滾動(dòng)條

用于替換瀏覽器原生滾動(dòng)條。

基礎(chǔ)用法

通過(guò) ?height ?屬性設(shè)置滾動(dòng)條高度，若不設(shè)置則根據(jù)父容器高度自適應(yīng)。

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

橫向滾動(dòng)

當(dāng)元素寬度大于滾動(dòng)條寬度時(shí)，會(huì)顯示橫向滾動(dòng)條。

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

最大高度

當(dāng)元素高度超過(guò)最大高度，才會(huì)顯示滾動(dòng)條。

<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>

手動(dòng)滾動(dòng)

通過(guò)使用 ?setScrollTop ?與 ?setScrollLeft ?方法，可以手動(dòng)控制滾動(dòng)條滾動(dòng)。

<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

Scrollbar Events

Scrollbar Methods