vue 中监听页面尺寸变化就调用函数

方法一:使用 window.onresize 结合 Vue 实例的生命周期钩子(不推荐,存在覆盖风险)

虽然可以直接使用原生的 window.onresize 事件来监听窗口大小变化,但这种方式在 Vue 项目中有一些局限性,因为如果在多个地方都这样使用,后赋值的会覆盖前面的,容易导致一些不可预期的问题。不过简单了解一下其基本实现方式如下:

<template><div><!-- 这里放置页面内容 --></div>
</template><script>
export default {data() {return {windowWidth: document.documentElement.clientWidth,windowHeight: document.documentElement.clientHeight};},mounted() {const that = this;window.onresize = function () {that.windowWidth = document.documentElement.clientWidth;that.windowHeight = document.documentElement.clientHeight;that.handleResize(); // 调用处理尺寸变化的函数};},methods: {handleResize() {console.log(`窗口宽度: ${this.windowWidth}px,高度: ${this.windowHeight}px`);// 在这里可以添加更多基于新尺寸的业务逻辑,比如根据不同尺寸显示不同的组件等}}
};
</script>

方法二:使用 window.addEventListener('resize', callback)(推荐)

使用 addEventListener 可以避免覆盖已有 resize 事件监听器的问题,并且更符合现代 JavaScript 开发习惯,在 Vue 项目中也是更常用的方式。以下是示例代码:

<template><div><!-- 这里放置页面内容 --></div>
</template><script>
export default {data() {return {windowWidth: document.documentElement.clientWidth,windowHeight: document.documentElement.clientHeight};},mounted() {const that = this;window.addEventListener('resize', function () {that.windowWidth = document.documentElement.clientWidth;that.windowHeight = document.documentElement.clientHeight;that.handleResize();});},beforeDestroy() {window.removeEventListener('resize', this.handleResize); // 在组件销毁时移除监听器,避免内存泄漏},methods: {handleResize() {console.log(`窗口宽度: ${this.windowWidth}px,高度: ${this.windowHeight}px`);// 在这里添加基于新尺寸的业务逻辑}}
};
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/15659.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

Kafka一些常用的命令行操作【包含主题命令、生产者和消费者命令】

文章目录 1、主题命令2、生产者命令行操作3、消费者命令行操作 1、主题命令 查看当前服务器中的所有 topic&#xff1a; kafka-topics.sh --bootstrap-server node01:9092 --list 创建topic&#xff1a; kafka-topics.sh --bootstrap-server node01:9092 --create --topic to…

基于物联网的温室大棚控制系统

本设计采用物联网方案&#xff0c;用STM32f103c8t6作为主控芯片&#xff0c;采用DHT11作为温湿度传感器&#xff0c;采集CO2使用JW01-CO2-V2.2传感器模块&#xff0c;并且通过BH1750传感器模块采集光照&#xff0c;通过土壤湿度传感器来获取大棚内部土壤湿度&#xff0c;ESP-01…

Ubuntu24安装配置NDK

1、下载NDK 下载压缩包&#xff0c;下载地址如下&#xff0c;建议下载LTS支持版本。 https://developer.android.google.cn/ndk/downloads?hlcs 2、解压缩 将NDK解压到指定文件夹。如&#xff1a;/opt 或者先解压&#xff0c;再移动到指定目录下。 3、配置环境变量 找到…

Python中的HTML

文章目录 一. HTML1. html的定义2. html的作用3. 基本结构4. 常用的html标签5. 列表标签① 无序列表② 有序列表 6. 表格标签7. 表单标签8. 表单提交① 表单属性设置② 表单元素属性设置 一. HTML 1. html的定义 HTML 的全称为&#xff1a;HyperText Mark-up Language, 指的是…

使用etl工具kettle的日常踩坑梳理之二、从Hadoop中导出数据

想操作MySQL等关系型数据库的可以访问我上一篇文章&#xff0c;本章主要介绍操作Hadoop等大数据组件。 根据2024年11月份测试了kettle工具在9.3及以上版本已经没有内置连接大数据(如Hadoop)组件了。 建议安装9.2及以下的&#xff0c;我这里送上8.3.0版本的请用百度网盘下载链…

NVR录像机汇聚管理EasyNVR多品牌NVR管理工具视频汇聚技术在智慧安防监控中的应用与优势

随着信息技术的快速发展和数字化时代的到来&#xff0c;安防监控领域也在不断进行技术创新和突破。NVR管理平台EasyNVR作为视频汇聚技术的领先者&#xff0c;凭借其强大的视频处理、汇聚与融合能力&#xff0c;展现出了在安防监控领域巨大的应用潜力和价值。本文将详细介绍Easy…

智慧安防丨以科技之力,筑起防范人贩的铜墙铁壁

近日&#xff0c;贵州省贵阳市中级人民法院对余华英拐卖儿童案做出了一审宣判&#xff0c;判处其死刑&#xff0c;剥夺政治权利终身&#xff0c;并处没收个人全部财产。这一判决不仅彰显了法律的威严&#xff0c;也再次唤起了社会对拐卖儿童犯罪的深切关注。 余华英自1993年至2…

游戏引擎学习第10天

视频参考:https://www.bilibili.com/video/BV1LyU3YpEam/ 介绍intel architecture reference manual 地址:https://www.intel.com/content/www/us/en/developer/articles/technical/intel-sdm.html RDTS&#xff08;读取时间戳计数器&#xff09;指令是 x86/x86_64 架构中的…

Asp.net Mvc 电脑销售系统

2 系统实现 2.1 系统框架 该服务平台采用三层架构&#xff0c;以ASP.NET MVC框架为基础 [6]。采用仓库设计的方法&#xff0c;布署灵便。.NET Framework是一个开源框架&#xff0c;适用混合开发。系统软件的集成开发工具是Visual Studio 2019。在数据库的开发中&#xff0c;利…

A3超级计算机虚拟机,为大型语言模型LLM和AIGC提供强大算力支持

热门大语言模型项目地址&#xff1a;www.suanjiayun.com/mirrorDetails?id66ac7d478099315577961758 近几个月来&#xff0c;我们目睹了大型语言模型&#xff08;LLMs&#xff09;和生成式人工智能强势闯入我们的视野&#xff0c;显然&#xff0c;这些模型在训练和运行时需要…

无人机飞手在保家卫国上重要性技术详解

无人机飞手在保家卫国方面发挥着越来越重要的作用&#xff0c;其重要性技术主要体现在以下几个方面&#xff1a; 一、无人机操作与维护技能 无人机飞手在入伍前通常已接受了系统的无人机操作培训&#xff0c;掌握了无人机的飞行原理、构造、维护保养以及多种飞行技巧。这种专…

数据结构--java对象的比较

目录 三种方法的比较 equals方法 Comparable.compareTo方法 执行比较 Comparator.compare方法 连接比较 Comparator和Comparable的区别 三种方法的比较 equals方法 将基本数据类型包装成对应的包装类&#xff08;如Integer、Double)进行比较 Comparable.compareTo方法 执…

yakit远程连接(引擎部署在vps上)

yakit的框架其实是类似于cs的主体是服务端&#xff0c;客户端只是一个简单的ui方便操作&#xff0c;同时他也提供了本地连接&#xff0c;平时使用还是本地连接的使用方式多&#xff0c;但在实际场景中服务端部署在vps上面会更加的方便&#xff0c;比如启动监听&#xff0c;使用…

实验二:Docker存储配置与管理

容器与非持久化数据 非持久化数据是不需要保存的那些数据&#xff0c;容器本地存储中的数据就属于这种类型。容器创建时会创 建非持久化存储&#xff0c;这是容器全部文件和文件系统保存的地方。 默认情况下&#xff0c;在容器内创建的所有文件都存储在可写容器层&#xff0c…

Java 日志框架(一)

1、Java 日志框架 问题&#xff1a; 控制日志输出的内容和格式控制日志输出的位置面向接口开发 —— 日志的门面&#xff08;类似 JDBC&#xff09; 1.1、现有的日志框架 1.1.1、日志门面 JCL、slf4j 1.1.2、日志实现 JUL、logback、log4j、log4j2 2、JUL JUL 全称是 …

i春秋-GetFlag(HTTP请求方法使用,XXF伪造ip)

练习平台地址 竞赛中心 题目描述 题目内容 一打开就是一Not Found&#xff0c;以为是服务器挂了 解题 在页面中发现了404.php&#xff0c;尝试访问 在页面源码和headers中没有发现有用信息 返回去看首页的headers有没有信息 发现首页的响应头中有个奇怪的X-Method&#xf…

pgSQL-timescaledb复制表出现的问题

今日在工作中&#xff0c;需要复制一张timescaledb表&#xff0c;pgAdmin上复制一直未成功&#xff0c;或者我找错位置了。 1.我使用Navicate连接pgSQL&#xff0c;连上后选中相应表&#xff0c;右键复制结构即可 2.复制结构后&#xff0c;到pgAdmin中&#xff0c;将对应表下的…

无人机应用场景:石油管道巡检技术详解

无人机在石油管道巡检中的应用&#xff0c;以其高效、便捷、灵活的特点&#xff0c;为石油管道的安全管理提供了有力支持。以下是对无人机在石油管道巡检技术方面的详细解析&#xff1a; 一、无人机巡检技术的概述 无人机巡检技术是指利用无人机搭载各种传感器和检测设备&…

vue3+ant design vue实现日期等选择器点击右上角叉号默认将值变为null,此时会影响查询等操作~

1、效果图 2、思路&#xff1a;通过监听操作时间绑定的值是否存在&#xff0c;若存在将其改为空数组即可 3、代码&#xff1a; <a-form-item name"beginDate" label"操作日期" labelAlign"left"><a-range-picker v-model:value"…

java版Spring Cloud+Mybatis+Oauth2+分布式+微服务+实现工程管理系统

工程项目管理软件&#xff08;工程项目管理系统&#xff09;对建设工程项目管理组织建设、项目策划决策、规划设计、施工建设到竣工交付、总结评估、运维运营&#xff0c;全过程、全方位的对项目进行综合管理 工程项目各模块及其功能点清单 一、系统管理 1、数据字典&am…