首页 > 其他分享 >vue获取屏幕的实时 宽度 / 高度

vue获取屏幕的实时 宽度 / 高度

时间:2024-08-28 15:57:33浏览次数:5  
标签:vue documentElement 实时 screenHeight window 屏幕 screenWidth document

mounted () {
    const that = this;
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.documentElement.clientWidth; //实时宽度
        window.screenHeight = document.documentElement.clientHeight; //实时高度
        console.log(this.screenWidth, this.screenHeight);
        that.screenWidth = window.screenWidth;
        that.screenHeight = window.screenHeight;
      })();
    };
  },

获取屏幕的宽度和高度 适用于响应式 用来做判断使用

标签:vue,documentElement,实时,screenHeight,window,屏幕,screenWidth,document
From: https://blog.csdn.net/qq_25439417/article/details/141538013

相关文章

  • vue3 常用的几种组件通讯方式
    vue3常用的几种组件通讯方式,大致如下Props/EmitPinia事件总线(mitt)Provide/Inject浏览器本地存储 1.Props/Emit注释:prop属性名称/方法名称的格式,采用 camelCase 与 kebab-case。 1.1props(1)上游组件设置 prop 值(通过v-bind或冒号) 或者 (2)下游......
  • 基于django+vue网上书店设计与实现【开题报告+程序+论文】-计算机毕设
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着互联网技术的飞速发展,电子商务已成为全球经济的重要组成部分,深刻改变了人们的购物方式和消费习惯。在这个数字化时代,网上书店作为电子......
  • 基于django+vue网上人才招聘系统【开题报告+程序+论文】-计算机毕设
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着互联网技术的飞速发展,网络已成为人们获取信息、交流互动的重要平台。在人力资源领域,传统的招聘方式逐渐显露出效率低下、成本高昂、信......
  • 基于django+vue网上求职招聘系统【开题报告+程序+论文】-计算机毕设
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着互联网技术的飞速发展和普及,网络已成为人们获取信息、交流互动的主要平台之一。在就业市场日益激烈的背景下,传统的求职招聘方式已难以......
  • 基于django+vue网上排课系统的设计与实现【开题报告+程序+论文】-计算机毕设
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着教育信息化的深入发展,传统的手工排课方式已难以满足现代教学管理的高效性、灵活性和准确性需求。传统方法不仅耗时费力,还容易出现课程......
  • Vue3知识点
    什么是Vue3用于构建用户界面的渐进式框架Vue2和Vue3的区别响应式系统的重写:使用Proxy代替defineProperty实现数据响应式。重写虚拟DOM的实现和Tree-Shaking销毁和卸载的改进,销毁前不需要执行额外的操作生命周期的添加新增的APIvue3是组合式api,vue2是选项式api......
  • Vue路由传参
    有query传参和params传参query:通过路由传参进行拼接,如下:<router-link:to="{name:'login',query:{id:10110,username:'yansunda'}}">登录组件</router-link>采用编程式导航使用query,使用$router.pushthis.$router.push({......
  • vue element 多层循环嵌套的表单校验
    最近vue2遇到的问题有一个数据结构是多层嵌套varlevel1list=[{name:'level1-1',level2List:[{name:'level2-1',level3List:[{name:'le......
  • 基于ssm+vue高校旧书交易系统【开题+程序+论文】
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着高等教育的普及与知识更新的加速,高校内书籍资源的流通与再利用成为了一个亟待解决的问题。每年,大量学生因毕业、转专业等原因,手中积累了大量不再......
  • 基于ssm+vue高校教材管理系统【开题+程序+论文】
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着高等教育的快速发展,高校教材管理成为了一个日益复杂且关键的环节。传统的手工管理模式已难以满足现代高校对教材管理的精准性、高效性和透明度的......