Javascript

Vue：结合ElementUI元素超过一定高度加滚动框,高度由浏览器高度决定并随浏览器变化而变化

本文主要是介绍Vue：结合ElementUI元素超过一定高度加滚动框,高度由浏览器高度决定并随浏览器变化而变化，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

  1. 首先利用ElementUI中的el-scrollbar增加滚动条, 并将生效高度绑定数据

    <el-scrollbar :height="scrollbarHeight">
  <div class="classShowInfoMainOfVulnerability"
       v-for="(item,index) in infoList"
       :key="index"
       @click="toVulnerabilityDetail"
  >
    ······
  </div>
</el-scrollbar>

  2. 界面加载完成后, 设置生效高度为浏览器高度的70%, 并监听浏览器变化事件, 实时更新高度

    mounted() {
  this.scrollbarHeight = document.documentElement.clientHeight * 0.7 + "px"
  window.onresize = () => {
    if (this.scrollbarHeight) this.scrollbarHeight = document.documentElement.clientHeight * 0.7 + "px"
  };
}

效果
在这里插入图片描述

这篇关于Vue：结合ElementUI元素超过一定高度加滚动框,高度由浏览器高度决定并随浏览器变化而变化的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航