EasyDSS前端界面在页面缩小时内置列表仍需手动刷新的优化

原创于 2021-09-02 17:32:39 发布 · 181 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍了在EasyDSS视频平台的前端开发中遇到的直播管理页面缩放适配问题。当页面尺寸变化时，列表未能自动调整。通过监听窗口尺寸变化并动态设置表格高度，成功实现了页面缩放时列表的自动适配。修复后，列表现在可以随着页面比例自动调整大小，提高了用户体验。

RTMP协议的视频平台EasyDSS除了直播外，还支持点播，转码、上传一体化设计，使音视频资源转码后可立即面向互联网进行发布，在线上教育领域已经能够成熟落地。在开发以及功能的更新过程中，EasyDSS内还运用了很多其他层面的开发技巧，我们也会不定期在博客更新，欢迎大家了解测试。

在做EasyDSS前端更新的时候，测试前端界面适配度，发现在直播管理页面缩小时，其列表不会自动伸缩，需要手动刷新之后才会按照比例进行匹配。

如下是页面正常大小下的列表：

页面缩小后，列表仍是维持原大小：

我们结合了表格设置的机制来进行检查，设置表格高度的方法只在DOM元素挂载后执行，页面放大缩小未调用设置表格的方法。在该问题中，我们需要对这种设置表格的方法添加监听，页面高度改变则调用监听页面尺寸：

created() {
  window.addEventListener("resize", this.getHeight);
},
设置表格方法
getHeight(){
  if (document.documentElement.clientHeight < 678){
    this.tableHeight = 300
  }else {
    this.tableHeight = document.documentElement.clientHeight - 400
  }
},

解决之后列表就能够正常随着比例自动进行放大和缩小了。

页面加载后：