首页 > 其他分享 >vue 检测可视区域大小及是否改变

vue 检测可视区域大小及是否改变

时间:2023-11-21 21:55:34浏览次数:35  
标签:areaHeight vue auto 可视 height 检测 100 document

表格height:'auto',如果是只有一个vxe-grid还好,会自动伸展高度,但是多个展示的时候,比如左侧列表,右侧显示一个流程。

这样height:'auto',发现不太好使。

这样就要计算可视区域高度,并进行动态处理。

  

const areaHeight = ref(0);

 

onMounted(() => {
    areaHeight.value = document.documentElement.clientHeight - 100;
    window.onresize = () => {
      return (() => {
        areaHeight.value = document.documentElement.clientHeight - 100;
      })();
    };
  });

这样就可以得到高度,并根据实际情况进行增减一个值即可。

 

引用:

<div :style="{ height: `${areaHeight}px` }">
...
</div>

 

标签:areaHeight,vue,auto,可视,height,检测,100,document
From: https://www.cnblogs.com/jiduoduo/p/17847702.html

相关文章

  • 基于vue技术的农业设备租赁系统-计算机毕业设计源码+LW文档
    摘 要使用旧方法对农业设备租赁系统的信息进行系统化管理已经不再让人们信赖了,把现在的网络信息技术运用在农业设备租赁系统的管理上面可以解决许多信息管理上面的难题,比如处理数据时间很长,数据存在错误不能及时纠正等问题。这次开发的农业设备租赁系统对收货地址管理、字典管理......
  • 前端vue经典面试题78道(重点详细简洁)
    前端vue经典面试题78道(重点详细简洁)目录1.自我介绍2.vue面试题1.v-show和v-if区别的区别:2.为何v-for要用key3.描述vue组件声明周期mm单组件声明周期图​父子组件生命周期图4.vue组件如何通信5.描述组件渲染和更新的过程1、vue组件初次渲染过程2、vue组件更新过程6......
  • 实时监控、智能控制:智慧芯片可视化大屏的应用前景展望
    随着科技的不断发展,智能芯片作为一种新型的电子元件,被广泛应用于各个领域,其中智慧芯片可视化大屏是一种重要的应用形式。 一、智慧芯片可视化大屏的优势智慧芯片可视化大屏是一种将智能芯片与大屏幕显示技术相结合的产品,山海鲸智慧芯片可视化大屏运用了指标卡、分组柱状图、百......
  • 记录--用了那么久的Vue,你了解Vue的报错机制吗?
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 Vue的5种处理Vue异常的方法相信大家对Vue都不陌生。在使用Vue的时候也会遇到报错,也会使用浏览器的F12来查看报错信息。但是你知道Vue是如何进行异常抛出的吗?vue是如何处理异常的呢?接下来和大家介绍介绍,Vue......
  • 羚通视频智能分析平台工地安全帽、反光背心AI智能算法检测系统算法识别
    羚通视频智能分析平台是一款专门用于工地安全帽和反光背心的AI智能检测系统算法识别的工具。该平台利用深度学习和计算机视觉技术,提供一种安全帽佩戴识别检测的智能算法方案,具有高精度检测、实时性强、可扩展性强、自定义配置和智能分析和预警等优点,能够满足工地安全管理的需求,提......
  • 羚通视频智能分析平台基于 AI 智能安防视频监控烟火识别、烟火检测算法分析
    羚通视频智能分析平台是一种基于先进的智能视频分析和深度学习技术的算法分析平台,专门致力于提供烟火识别检测的智能算法方案。这一方案具有高精度检测、实时性强、可扩展性强、智能分析和预警等优点,能够满足安防监控领域中对烟火检测的需求,有效提高监控效率和安全性。在实际应用中......
  • 羚通视频智能分析平台基于 AI 智能安防视频监控烟火识别、烟火检测算法分析
    羚通视频智能分析平台是一种基于先进的智能视频分析和深度学习技术的算法分析平台,专门致力于提供烟火识别检测的智能算法方案。这一方案具有高精度检测、实时性强、可扩展性强、智能分析和预警等优点,能够满足安防监控领域中对烟火检测的需求,有效提高监控效率和安全性。......
  • 羚通视频智能分析平台打电话算法检测 打电话、玩手机算法预警
    羚通视频智能分析平台是一款利用人工智能技术对监控视频进行智能分析的工具,它具备强大的算法检测和识别功能。该平台的主要功能是自动识别和检测违规行为,如打电话和使用手机等,从而帮助管理人员提高管理效率和管理水平。具体来说,该平台的打电话检测识别系统能够自动识别和检测打电话......
  • 现代科技手段在城市交通领域的应用:地铁列车可视化
    随着城市化进程的不断加速,地铁作为一种便捷、快速的城市交通方式,受到了越来越多人的青睐。地铁列车可视化,作为地铁运营管理中的一项重要工作,不仅可以提高列车运行效率和安全性,还可以为乘客提供更加舒适、便捷的乘车体验。 什么是地铁列车可视化?地铁列车可视化,是指通过现代科技......
  • 羚通视频智能分析平台打电话算法检测 打电话、玩手机算法预警
    羚通视频智能分析平台是一款利用人工智能技术对监控视频进行智能分析的工具,它具备强大的算法检测和识别功能。该平台的主要功能是自动识别和检测违规行为,如打电话和使用手机等,从而帮助管理人员提高管理效率和管理水平。具体来说,该平台的打电话检测识别系统能够自动识......