vue 获取元素的大小信息

news/2025/2/22 15:42:27/

在模板中为元素添加一个ref属性:

<template>  <div ref="myElement">Hello, World!</div>  
</template>

然后,在组件的setup函数中使用ref获取元素,并获取元素的信息:

vue2获取方式

 mounted() {  console.log(this.$refs.myElement); // 输出元素的信息  },  

vue3获取方式:

import { ref, onMounted } from 'vue';  export default {  setup() {  const myElement = ref(null);  onMounted(() => {  const rect = myElement.value.getBoundingClientRect();  console.log(rect.height); // 输出元素的高度  console.log(rect.width); // 输出元素的宽度  });  return { myElement };  },  
};


http://www.ppmy.cn/news/1236784.html

相关文章

『亚马逊云科技产品测评』活动征文|通过Lightsail搭建个人笔记

提示&#xff1a;授权声明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 Developer Centre, 知乎&#xff0c;自媒体平台&#xff0c;第三方开发者媒体等亚马逊云科技官方渠道 文章目录 前言实践知识储备Lightsail介绍Leanote介绍实践…

Qt实现自定义IP地址输入控件(百分百还原Windows 10网络地址输入框)

在开发网络相关的程序时,我们经常需要输入IP地址,例如源地址和目标地址。Qt提供了一些基础的控件,如QLineEdit,但是它们并不能满足我们对IP地址输入的要求,例如限制输入的格式、自动跳转到下一个输入框、处理回车和退格键等。因此,我们需要自己编写一个自定义的IP地址输入…

Docker可视化管理界面工具Portainer安装

Portainer是Docker容器管理界面工具&#xff0c;可以直观的管理Docker。 部署也很简单&#xff1a; 官方安装文档地址 1、创建数据卷 docker volume create portainer_data2、下载允许容器 docker run -d -p 8000:8000 -p 9443:9443 --name portainer --restartalways -v /v…

执行shell脚本提示syntax error: unexpected end of file

具体报错如下&#xff1a; ./test.sh: line 36: syntax error: unexpected end of file执行命令时需将test.sh替换为实际的脚本文件名称。 情形一&#xff1a; shell脚本在Windows下编写&#xff0c;上传到Linux上执行&#xff0c;由于 fileformat 类型不同&#xff0c;所以报…

数据提取PDF SDK的对比推荐

PDF 已迅速成为跨各种平台共享和分发文档的首选格式&#xff0c;它作为一种数据来源&#xff0c;常见于公司的各种报告和报表中。为了能更好地分析、处理这些数据信息&#xff0c;我们需要检测和提取 PDF 中的数据&#xff0c;并将其转换为可用且有意义的格式。而数据提取的 PD…

Redis报错:JedisConnectionException: Could not get a resource from the pool

1、问题描述&#xff1a; redis.clients.jedis.exceptions.JedisConnectionException: Could not get a resource from the pool 2、简要分析&#xff1a; redis.clients.util.Pool.getResource会从JedisPool实例池中返回一个可用的redis连接。分析源码可知JedisPool 继承了 r…

hadoop 常用端口号,常用配置文件都有哪些?hadoop3.x端口号 hadoop(十二)

1. hadoop3.x系列常用端口号&#xff1a; 类型desc端口hdfs NameNode内部通常端口号8020/9000/9820 hdfs NameNode 对用户的查询端口9870yarn查看历史任务运行情况8088历史服务器19888 2. hadoop 2.x系列常用端口号&#xff1a; 类型desc端口 hdfs NameNode 内部通常端口802…

内部网关协议_路由信息协议RIP_开放路径优先OSPF协议_基本知识

目录: 因特网路由选择协议概述 路由信息协议RIP 开放路径优先OSPF协议 因特网路由选择协议概述 一.路由选择分类 静态路由选择和动态路由选择 静态路由选择: 采用人工配置的方式给路由器添加网络路由、默认路由和特定主机路由等路由条目。静态路由选择简单、开销小&#…