Element-plus 设置el-scrollbar 高度自适应窗口变化

JsoCc

已于 2022-06-23 00:36:03 修改

阅读量3.7k

点赞数 4

分类专栏： Element 文章标签： vue.js 前端 javascript elementui

于 2022-06-23 00:34:42 首次发布

本文链接：https://blog.csdn.net/jso_cc/article/details/125419080

版权

Element 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Vue3应用中，结合Electron框架，利用ref和window.onresize事件动态调整el-scrollbar组件的高度，以适应窗口大小的变化。通过设置ref变量sc_height并监听窗口大小，实现滚动条高度随窗口尺寸自动更新。

摘要由CSDN通过智能技术生成

环境：Vue3.2+electron+element （版本就不写了，都差不多）

在Vue里面添加一个ref变量

const sc_height = ref('760px') //默认高度

在设置el-scrollbar参数

<el-scrollbar
	:height="sc_height" // 动态设置el-scrollbar高度
>

window.onresize = function () { //检测window窗口改变大小
  // console.log("窗口变化了！")
  console.log(window.innerHeight) //打印window窗口高度
  sc_height.value = (window.innerHeight - 50) + 'px' // window的窗口高度肯定比el-scrollbar高，可以稍微减少点。减少多少自己修改50这个值
}