当前位置: 首页 > news >正文

vue3+ts:监听dom宽高变化函数

一、效果展示

二、代码

getSize.ts

import { ref, Ref, watchEffect } from "vue";export const getWidth = (domRef: Ref<HTMLElement | null>) => {const width = ref<number>(0);const height = ref<number>(0);const observer = new ResizeObserver(() => {if (domRef.value) {width.value = domRef.value.clientWidth;height.value = domRef.value.clientHeight;}console.log("width", width.value);});//设置一个变量来存储dom元素,让ResizeObserver知道它要监听哪个元素//因为domRef.value可能会变化,所以我们需要一个变量来存储它,这样我们就可以在domRef.value变化的时候取消监听,防止内存泄漏并提高性能//如果在该函数中需要同时监听多个dom,可以考虑使用weakMap来存储dom和ResizeObserver实例let observerDom: HTMLElement | null = null;watchEffect(() => {const newDom = domRef.value;//如果我们传入的dom存在,就让ResizeObserver监听它//如果我们传入的dom不存在,就让ResizeObserver取消监听if (newDom) {observerDom = newDom;observer.observe(observerDom);} else if (observerDom) {observer.unobserve(observerDom);}});return { width, height };
};

组件中使用:

<template><div class="page"><div class="observerDom" ref="observerRef">{{ width.width }}</div></div>
</template><script setup lang="ts">
import { ref } from "vue";
import { getWidth } from "./getSize";
const observerRef = ref();
const width = getWidth(observerRef);
</script>
<style scoped>
.page {width: 100%;height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #8c4141;
}
.observerDom {width: 60%;height: 60px;background-color: #f1f1f1;
}
</style>

相关文章:

vue3+ts:监听dom宽高变化函数

一、效果展示 二、代码 getSize.ts import { ref, Ref, watchEffect } from "vue";export const getWidth (domRef: Ref<HTMLElement | null>) > {const width ref<number>(0);const height ref<number>(0);const observer new ResizeObs…...

数据库浅识及MySQL的二进制安装

数据库基础概念与MySQL二进制安装与初始化 使用数据库的必要性 数据库可以结构化储存大量数据信息&#xff0c;方便用户进行有效的检索访问 有效的保持数据信息的一致性&#xff0c;完整性&#xff0c;降低数据冗余 可以满足应用的共享和安全方面的要求 数据库基本概念 数据…...

机器学习之数学基础(七)~过拟合(over-fitting)和欠拟合(under-fitting)

目录 1. 过拟合与欠拟合 1.1 Preliminary concept 1.2 过拟合 over-fitting 1.3 欠拟合 under-fitting 1.4 案例解析&#xff1a;黑天鹅 1. 过拟合与欠拟合 1.1 Preliminary concept 误差 经验误差&#xff1a;模型对训练集数据的误差。泛化误差&#xff1a;模型对测试…...

⭐最新版!SpringBoot正确集成PageHelper姿势,不再被误导!

GGBond&#x1f508; CSDN的朋友们大家好哇&#xff0c;我是新来的Java练习生 CodeCodeBond&#xff01; 什么是PageHelper&#xff1f; 这里给不知道的人儿说明一下~~ 知道的xdm可以跳过了&#xff01; PageHelper顾名思义是一个 页面 帮手。也就是分页查询的一个好用的工具…...

解决:Xshell通过SSH协议连接Ubuntu服务器报“服务器发送了一个意外的数据包,received:3,expected:20”

下图所示&#xff1a; 日志也基本看不出来问题在哪&#xff0c;只是说断开了连接大概是验证失败。有幸在某论坛评论区找到了原因&#xff0c;是因为我的xshell版本太低了而服务器的ssh版本太高&#xff0c;高版本的ssh默认屏蔽了一部分不太安全的算法导致建立连接的时候验证失败…...

[学习笔记] 禹神:一小时快速上手Electron笔记,附代码

课程地址 禹神&#xff1a;一小时快速上手Electron&#xff0c;前端Electron开发教程_哔哩哔哩_bilibili 笔记地址 https://github.com/sui5yue6/my-electron-app 进程通信 桌面软件 跨平台的桌面应用程序 chromium nodejs native api 流程模型 main主进程 .js文件 node…...

Java stream操作流常用的方式

在Java中&#xff0c;Stream操作流是Java 8新引入的一个功能&#xff0c;它提供了很多强大的操作&#xff0c;方便我们进行集合的处理和操作。常用的Stream操作方式有&#xff1a; 1.过滤&#xff1a;使用filter()方法可以过滤掉集合中不符合条件的元素。 2.映射&#xff1a;…...

【C#】图形图像编程

实验目标和要求&#xff1a; 掌握C#图形绘制基本概念&#xff1b;掌握C#字体处理&#xff1b;能进行C#图形图像综合设计。 运行效果如下所示&#xff1a; 1.功能说明与核心代码 使用panel为画板&#xff0c;完成以下设计内容&#xff1a; 使用pen绘制基础图形&#xff1b;使…...

埃特巴什码加解密小程序

埃特巴什码加解密小程序 这几天在看CTF相关的课程&#xff0c;涉及到古典密码学和近代密码学还有现代密码学。 简单替换密码 Atbash Cipher 埃特巴什码(Atbash Cipher)其实可以视为下面要介绍的简单替换密码的特例&#xff0c;它使用字母表中的最后 一个字母代表第一个字母…...

Golang笔记:使用serial包进行串口通讯

文章目录 目的使用入门总结 目的 串口是非常常用的一种电脑与设备交互的接口。这篇文章将介绍golang中相关功能的使用。 本文使用的包为 &#xff1a;go.bug.st/serial https://pkg.go.dev/go.bug.st/serial https://github.com/bugst/go-serial 另外还有一些常见的包如&…...

EasyExcel 导出批注信息

1. 批注信息 package com.xxx.demo;import lombok.Getter;/*** This class represents the comment information associated with a specific cell in an Excel sheet.* The columnIndex field specifies the column number of the cell, and the comment field stores the te…...

HttpServletRequest・getContentLeng・getContentType区别

getContentLength()&#xff1a; 获取客户端发送到服务器的HTTP请求主体内容的字节数&#xff08;长度&#xff09; 如果请求没有正文内容&#xff08;如GET&#xff09;&#xff0c;或者请求头中没有包含Content-Length字段&#xff0c;则该方法返回 -1 getContentType()&am…...

Matlab|【防骗帖】考虑时空相关性的风电功率预测误差建模与分析

目录 1 主要内容 2 部分程序 3 下载链接 1 主要内容 这个程序《考虑时空相关性的风电功率预测误差建模与分析》画的图片非常漂亮&#xff0c;和原文献基本一致&#xff0c;但是实际上内容并未实现出来&#xff0c;主要就是利用现有的风电预测的数据和结果做了相关的图&#…...

【Android面试八股文】说一说ListView卡顿的原因以及相对应的优化策略

文章目录 一、ListView卡顿的原因1.1 Item没有复用1.2 布局的层级过深1.3 数据绑定逻辑过多1.4 滑动时不必要的图片刷新1.5 频繁的notifyDataSetChanged二、优化策略2.1 使用 ViewHolder 进行视图复用2.2 优化布局结构2.3 优化数据绑定逻辑过多2.4 图片加载优化2.5 避免频繁调用…...

Kotlin 中的内联函数

1 inline 内联函数&#xff1a;消除 Lambda 带来的运行时开销。 举例来说&#xff1a; fun main() {val num1 100val num2 80val result num1AndNum2(num1, num2) { n1, n2 ->n1 n2} }fun num1AndNum2(num1: Int, num2: Int, operation: (Int, Int) -> Int): Int …...

KALI LINUX 开启ssh免登录服务及固定ip及

SSH以进行远程登录 在Kali Linux中启用SSH以进行远程登录,请按照以下步骤操作: 安装SSH服务:sudo apt update sudo apt install openssh-server 已安装可忽略 sudo systemctl start ssh 启动SSH服务 sudo systemctl enable ssh 确保SSH服务设置为开机启动: (可选)如…...

亮数据,一款新的低代码爬虫利器!

在当今数据驱动型时代&#xff0c;数据采集和分析能力算是个人和企业的核心竞争力。然而&#xff0c;手动采集数据耗时费力且效率低下&#xff0c;而且容易被网站封禁。 我之前使用过一个爬虫工具&#xff0c;亮数据&#xff08;Bright Data&#xff09; &#xff0c;是一款低…...

配置OSPF认证(华为)

#交换设备 配置OSPF认证-基于华为路由器 OSPF&#xff08;开放最短路径优先&#xff09;是一种内部网关协议&#xff08;IGP&#xff09;&#xff0c;用于在单一自治系统&#xff08;AS&#xff09;内决策路由。OSPF认证功能是路由器中的一项安全措施&#xff0c;它的主要用途…...

关于ip地址的网页无法访问navigator的gpu、媒体、蓝牙等设备的解决方法

在使用threejs的WebGPURenderer渲染器时&#xff0c;发现localhost以及127.0.0.1才能访问到navigator.gpu&#xff0c;直接使用ip会变成undefined,原因是为了用户的隐私安全&#xff0c;只能在安全的上下文中使用&#xff0c;非安全的上下文就会是undefined&#xff0c;安全上下…...

深入理解外观模式(Facade Pattern)及其实际应用

引言 在软件开发中&#xff0c;复杂的系统往往由多个子系统组成&#xff0c;这些子系统之间的交互可能非常复杂。外观模式&#xff08;Facade Pattern&#xff09;通过为这些子系统提供一个统一的接口&#xff0c;简化了它们的交互。本篇文章将详细介绍外观模式的概念、应用场…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

云计算——弹性云计算器(ECS)

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

JS设计模式(4):观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

Kubernetes 网络模型深度解析:Pod IP 与 Service 的负载均衡机制,Service到底是什么?

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...

Python 训练营打卡 Day 47

注意力热力图可视化 在day 46代码的基础上&#xff0c;对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...

VisualXML全新升级 | 新增数据库编辑功能

VisualXML是一个功能强大的网络总线设计工具&#xff0c;专注于简化汽车电子系统中复杂的网络数据设计操作。它支持多种主流总线网络格式的数据编辑&#xff08;如DBC、LDF、ARXML、HEX等&#xff09;&#xff0c;并能够基于Excel表格的方式生成和转换多种数据库文件。由此&…...