【笔记】vue3.x 根据窗口大小设置滚动条的高度

在开发过程，遇到了滚动条块的高度需要根据窗口变化而变化的需求，下面我们用elment plus中的el-scrollbar来实现这个需求

还是直接上代码。

<template>
  <el-scrollbar :style="{ height: `${scollHeight}px` }"></el-scrollbar>
</template>

setup() {
  const getScollHeight = () => {
    // 根据自己的需要设置获取高度的逻辑
    return document.body.clientHeight * 0.6
  }
  const scollHeight = ref(getScollHeight())
  const windowResize = () => {
    scollHeight.value = getScollHeight()
  }
  onMounted(() => {
    window.addEventListener('resize', windowResize)
  })
  onUnmounted(() => {
    window.removeEventListener('resize', windowResize)
  })
  return {
    scollHeight
  }
}