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.rhkb.cn/news/472743.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ollama+springboot ai+vue+elementUI整合

1. 下载安装ollama (1) 官网下载地址&#xff1a;https://github.com/ollama/ollama 这里以window版本为主&#xff0c;下载链接为&#xff1a;https://ollama.com/download/OllamaSetup.exe。 安装完毕后&#xff0c;桌面小图标有一个小图标&#xff0c;表示已安装成功&…

零基础利用实战项目学会Pytorch

目录 pytorch简介 1.线性回归 2.数据类型 2.1数据类型检验 2.2Dimension0/Rank0 2.3 Dim1/Rank1 2.4 Dim2/Rank2 3.一些方法 4.Pytorch完成分类任务 4.1模型参数 4.2 前向传播 4.3训练以及验证 4.4 三行搞定&#xff01; 4.5 准确率 5、Pytorch完成回归任务 5.…

大数据实验9:Spark安装和编程实践

实验九&#xff1a;Spark基础编程1 一、实验目的 通过实验掌握基本的Spark编程方法&#xff1b;掌握用Spark解决一些基本的数据处理和统计分析&#xff0c;去重、排序等&#xff1b; 二、实验要求 掌握Spark相关shell命令的使用&#xff1b;完成下面的实验内容&#xff0c;…

vue3 element el-table实现表格动态增加/删除/编辑表格行,带有校验规则

需求描述 在项目中遇到需要实现表格动态的新增、编辑、删除表格行的需求&#xff0c;同时带有校验规则 代码解决 点击新增的时候&#xff0c;给新增row默认属性&#xff0c;给相应的默认值&#xff0c;包括给一个isEditor: true&#xff0c;用来区分是否需要编辑。同时当有编…

Redis下载历史版本

Linux版本&#xff1a; https://download.redis.io/releases/ Windows版本&#xff1a; https://github.com/tporadowski/redis/releases Linux Redis对应gcc版本

初识ElasticSearch

一、了解ES 1.1 什么是 ElasticSearch 1、ElasticSearch 是一款非常强大的开源搜索引擎&#xff0c;可以帮助我们从海量的数据中快速的找到需要的内容。 2、ElasticSearch 结合 Kibana、Logstash、Beats、也就是Elastic Stach&#xff08;ELK&#xff09;。被广泛应用在日志数…

【大数据学习 | HBASE高级】hbase-phoenix 与二次索引应用

1. hbase-phoenix的应用 1.1 概述&#xff1a; 上面我们学会了hbase的操作和原理&#xff0c;以及外部集成的mr的计算方式&#xff0c;但是我们在使用hbase的时候&#xff0c;有的时候我们要直接操作hbase做部分数据的查询和插入&#xff0c;这种原生的方式操作在工作过程中还…

Redis在高性能缓存中的应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 Redis在高性能缓存中的应用 Redis在高性能缓存中的应用 Redis在高性能缓存中的应用 引言 Redis 概述 定义与原理 发展历程 Redi…

MySQL初学之旅(3)约束

目录 1.前言 2.正文 2.1约束类型 2.2NULL约束 2.3UNIQUE约束 2.4DEFAULT约束 2.5PRIMARY KEY主键约束 2.6FOREIGN KEY外键约束 2.7CHECK约束 3.小结 1.前言 哈喽大家好啊&#xff0c;今儿来继续给大家分享最近学习的MySQL和约束相关的知识点&#xff0c;希望大家一起…

RHCE的学习(20)

变量5种赋值方式 shell中变量赋值5种方式&#xff0c;其中采用name10的方法称A 直接赋值 nameB read命令 read v1C 使用命令行参数 &#xff08;$1 $2 $3 ..&#xff09; name$1D 使用命令的输入 username$(whoami)E 从文件读取 #cut -d : -f1 /etc/passwd > /user.listfor…

Java项目实战II基于微信小程序的电子商城购物平台(开发文档+数据库+源码)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 随着互联网…

Godot的开发框架应当是什么样子的?

目录 前言 全局协程还是实例协程&#xff1f; 存档&#xff01; 全局管理类&#xff1f; UI框架&#xff1f; Godot中的异步&#xff08;多线程&#xff09;加载 Godot中的ScriptableObject 游戏流程思考 结语 前言 这是一篇杂谈&#xff0c;主要内容是对我…

【C++】深入理解 C++ 优先级队列、容器适配器与 deque:实现与应用解析

个人主页: 起名字真南的CSDN博客 个人专栏: 【数据结构初阶】 &#x1f4d8; 基础数据结构【C语言】 &#x1f4bb; C语言编程技巧【C】 &#x1f680; 进阶C【OJ题解】 &#x1f4dd; 题解精讲 目录 前言&#x1f4cc; 1. 优先级队列、容器适配器和 deque 概述✨1.1 什么是优…

SpringMVC学习笔记(一)

一、SpringMVC的基本概念 &#xff08;一&#xff09;三层架构和MVC 1、三层架构概述 我们的开发架构一般都是基于两种形式&#xff0c;一种是 C/S 架构&#xff0c;也就是客户端/服务器&#xff0c;另一种是 B/S 架构&#xff0c;也就是浏览器服务器。在 JavaEE 开发中&…

Jav项目实战II基于微信小程序的助农扶贫的设计与实现(开发文档+数据库+源码)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 在当前社会…

Ubuntu安装ollama,并运行ollama和通义千问,使用gradio做界面

Ubuntu安装ollama&#xff0c;并运行ollama和通义千问 安装ollama方式一&#xff1a;方式二 下载安装模型运行大模型运行ollama服务前端的实现python环境安装修改pip国内源前端页面搭建测试前后端联通设计完整的ui 安装ollama 方式一&#xff1a; 访问网站连接&#xff0c;选…

对接阿里云实人认证

对接阿里云实人认证-身份二要素核验接口整理 目录 应用场景 接口文档 接口信息 请求参数 响应参数 调试 阿里云openApi平台调试 查看调用结果 查看SDK示例 下载SDK 遇到问题 本地调试 总结 应用场景 项目有一个提现的场景&#xff0c;需要用户真实的身份信息。 …

C++ 的发展

目录 C 的发展总结&#xff1a;​编辑 1. C 的早期发展&#xff08;1979-1985&#xff09; 2. C 标准化过程&#xff08;1985-1998&#xff09; 3. C 标准演化&#xff08;2003-2011&#xff09; 4. C11&#xff08;2011年&#xff09; 5. C14&#xff08;2014年&#xf…

蓝桥杯——数组

1、移动数组元素 package day3;import java.util.Arrays;public class Demo1 {public static void main(String[] args) {int[] arr {1,2,3,4,5,6};int k 2;int[] arr_new f(arr,k);for (int i : arr_new) {System.out.print(i",");}//或System.out.println();St…

六自由度双足机器人运动控制

最近迷上了研究机器人&#xff0c;花了很多时间研究机器人的控制和交互。先后开发出来了四足四自自由度&#xff0c;四足八自由度&#xff0c;两足四自由度&#xff0c;两足六自由度机器人&#xff0c;并为他们开发了相应的大模型语音交互。通过努力&#xff0c;既锻炼了动手组…