element-plus 的el-scrollbar滚动条组件

news2024/9/20 5:17:22

el-scrollbar组件可以替换原生的滚动条，可以设置出现滚动条的高度，若无设置则根据容器自适应。

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

scroll 滚动条的滚动事件，会返回滚动条当前的位置。

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { ElScrollbar } from 'element-plus'
    const scrollEvent=({ scrollLeft, scrollTop })=>{
        console.info(scrollTop)
        val.value=scrollTop
    }

    const val=ref(0)
    const max=ref(0)
    const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>()

    onMounted(()=>{
      max.value=window.innerHeight
    })


    const inputTop=(value:number)=>{
      scrollbarRef.value!.setScrollTop(value)
    }
 
</script>

    
<template>

  <el-container :direction="vertical" style="height: 100vh;">
    <el-header height="">
      <!-- Header content -->
    </el-header>
    <el-container :direction="horizontal">
      <el-aside width="200px">
        <!-- Aside content -->
      </el-aside>
      <el-container :direction="vertical">
        <el-main>
          
            <el-scrollbar height="300px" @scroll="scrollEvent" ref="scrollbarRef">
                <div class="container">
                    <p v-for="item in 30" class="item" :key="item">
                        {{ item }}
                    </p>
                </div>
            </el-scrollbar>

            <el-slider v-model="val" :min="0" :max="max" @input="inputTop">
            </el-slider>
            
        </el-main>
        <el-footer height="">
          <!-- Footer content -->
        </el-footer>
      </el-container>
    </el-container>
  </el-container>
  


</template>

<style scoped>
    .container{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;
    }

    .item{
      flex: 1;
      background-color: lightskyblue;
      margin:10px 10px;
      height: 60px;
      text-align: center;
      border: 1px solid black;
    }

</style>