uniapp 获取dom信息(封装获取元素信息工具函数)

在uniapp开发中,需要获取到dom的信息,需要用到uniapp的指定方式

uni.createSelectorQuery(),但是每次需要用到的时候都需要很长一段的繁琐代码,本篇文章将呈现获取dom信息方法封装,话不多说,上菜:

getDomInfo(id, that) {return new Promise((resolve, reject) => {if (!id) return reject('id/类名 不能为空')if (!that) return reject('this指向不能为空')const query = uni.createSelectorQuery().in(that);query.select(id).boundingClientRect(data => {// console.log("节点离页面顶部的距离为" + data.height);resolve(data || {})}).exec();})
},

因为uni.createSelectorQuery()是一个异步方法,所以封装的时候将其封装在一个Promise里面,其方法需要传入两个参数(元素id/类名,当前页面的this),下面举例使用:

<template><view class="page"><view class="dom"></view></view>
</template><script>
export default {async mounted() {let domInfo = await this.$util.getDomInfo('.dom', this);},
}
</script><style lang="scss" scoped>
.dom{width: 250rpx;height: 500rpx;
}
</style>

注:该方法需要早mounted挂载后使用才行,要不无法获取到dom信息

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

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

相关文章

Linux之数据链路层

Linux之数据链路层 一.以太网1.1以太网帧格式1.2MAC地址1.3MTU 二.ARP协议2.1ARP协议工作流程2.2ARP协议格式 三.NAT技术四.代理服务4.1正向代理4.2反向代理 五.四大层的学习总结 一.以太网 在我们学习完了网络层后我们接下来就要进入数据链路层的学习了&#xff0c;在学习完网…

MySQL的基础语法2(函数-字符串函数、数值函数、日期函数和流程函数 )

目录 一、字符串函数 1.常见字符串函数 ​编辑 2.字符串函数的基本使用 3.字符串函数的数据库案例演示 二、数值函数 1.常见数值函数&#xff08;如下&#xff09;&#xff1a; 2.数值函数的基本使用 3.数值函数的数据库案例演示 三、日期函数 1.常见的日期函数 2.日…

全新版租赁商城小程序源码系统 源码开源支持二开+图文搭建教程

在互联网商业的浪潮中&#xff0c;租赁业务凭借其独特的优势&#xff0c;正逐渐成为市场的新宠。对于开发者而言&#xff0c;快速搭建一个功能完备的租赁商城小程序&#xff0c;不仅能满足市场需求&#xff0c;还能为自己的业务拓展带来新的机遇。分享一款全新版租赁商城小程序…

Cent OS7+Docker+Dify

由于我之前安装了Dify v1.0.0&#xff0c;出现了一些问题&#xff1a;无法删除&#xff0c;包括&#xff1a;知识库中的文件、应用、智能体、工作流&#xff0c;都无法删除。现在把服务器初始化&#xff0c;一步步重新安装&#xff0c;从0到有。 目录 1、服务器重装系统和配置…

OSI 七层模型和四层模型(TCP/IP 模型)

文章目录 前言一、OSI 七层模型二、TCP/IP 四层模型三、运行协议及设备1. OSI 七层模型2. TCP/IP 四层模型3. 运行协议4. 各类设备的作用 总结 前言 OSI 七层模型和四层模型&#xff08;TCP/IP 模型&#xff09;是两种常见的网络协议分层架构&#xff0c;它们的主要区别如下&a…

AI的未来:机遇、挑战与发展方向

&#x1f4dd;个人主页&#x1f339;&#xff1a;一ge科研小菜鸡-CSDN博客 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; 1. 引言 人工智能&#xff08;AI&#xff09;已经成为当今世界最具革命性的技术之一&#xff0c;它正在深刻改变各个行业&#x…

javascript实现一个函数,将字符串中的指定子串全部替换为另一个字符串的原理,以及多种方法实现。

大白话javascript实现一个函数&#xff0c;将字符串中的指定子串全部替换为另一个字符串的原理&#xff0c;以及多种方法实现。 在JavaScript里&#xff0c;要是你想把字符串里的指定子串都替换成另外一个字符串&#xff0c;有不少方法可以实现。下面我会详细介绍实现的原理&a…

硬件基础--16_公式梳理

公式梳理 欧姆定律: IU/R 1.欧姆定律有局限性&#xff0c;仅适用于纯电阻电路(或者说纯电阻元器件&#xff0c;纯电阻设备) 2.纯电阻电路:消耗的电能仅转化为热能&#xff0c;没有其他形式的能量转换。 功率计算:PUI 1.导出公式:PU2 /R 2.导出公式:PI2 R 焦耳定律:QI2 Rt 1.导…

npm i 出现的网络问题

npm i 出现的网络问题 解决方案&#xff1a; npm config list 查看.npmrc文件中是否配置了proxy删除.npmrc文件中的proxy&#xff0c;保存。重新执行npm i命令。 顺便说说解决这个问题的心里路程 每次安装vue的环境的时候&#xff0c;经常遇到npm安装一些插件或者是依赖的时…

使用vue cli 5.0 在vscode中运行vue命令报错

1、运行 vue -- version 报错 2、在cmd 命令行 执行 vue --version 正常 3、在终端中输入 get-ExecutionPolicy&#xff0c;查看当前权限 4、执行 set-executionpolicy remotesigned 命令设置为可用模式&#xff0c;但是报错 5、使用管理员打开power shell 执行 G…

瑞芯微 RKrga接口 wrapbuffer_virtualaddr 使用笔记

一、源码 官方在librga中给了很多 demo 以供参考&#xff0c;例如 imresize 操作&#xff1a; /** Copyright (C) 2022 Rockchip Electronics Co., Ltd.* Authors:* YuQiaowei <cerf.yurock-chips.com>** Licensed under the Apache License, Version 2.0 (the &qu…

Spring MVC:从历史演变到实战入门

1. Java Web的发展历史与MVC模式 1.1 Model I与Model II的演进 Model I&#xff08;JSPJavaBean&#xff09; 作为早期Java Web开发的主流模式&#xff0c;其核心架构如下&#xff1a; graph LR A[客户端] --> B[JSP页面] B --> C{业务逻辑} C --> D[JavaBean] D -…

AI赋能,防御无界:群联云防护如何颠覆传统DDoS防御格局?

一、AI驱动的动态防御体系 智能流量调度 群联云防护通过AI算法实时分析流量特征&#xff0c;动态分配清洗节点。当检测到攻击时&#xff0c;系统能在秒级内将流量切换至备用节点&#xff0c;避免单点过载。相较传统高防IP依赖静态规则&#xff0c;群联的调度策略可减少50%的误封…

R --- Error in library(***) : there is no package called ‘***’ (服务器非root用户)

步骤 步骤一&#xff1a;在自己目录下创建R包安装路径步骤二&#xff1a;配置用户本地的R库路径步骤三&#xff1a;安装缺失的包&#xff08;在终端&#xff09;步骤四&#xff1a;验证安装 步骤一&#xff1a;在自己目录下创建R包安装路径 mkdir -p ~/R_libs步骤二&#xff1…

HarmonyOS NEXT状态管理实践

在HarmonyOS NEXT开发中&#xff0c;状态管理是构建高效、响应式应用的核心。本文深入探讨状态管理的最佳实践&#xff0c;结合代码示例与案例分析&#xff0c;帮助开发者掌握这一关键技能。 一、状态管理装饰器的合理使用 HarmonyOS NEXT提供多种状态管理装饰器&#xff0c;…

excel 时间戳 转日期

在Excel中&#xff0c;将时间戳转换为日期格式&#xff0c;可以使用以下步骤和方法&#xff1a; 一、了解时间戳 时间戳&#xff08;Timestamp&#xff09;通常是从1970年1月1日&#xff08;UTC时间&#xff09;开始的秒数或毫秒数。这个时间点被称为“Unix纪元”或“Unix时间…

Python CSV 数据分析:问题排查与解决全记录

Python CSV 数据分析&#xff1a;问题排查与解决全记录 前段时间&#xff0c;我接到一个任务&#xff0c;需要对公司的销售数据进行分析。这些数据存储在 CSV 文件里&#xff0c;本想着用 Python 处理起来会很轻松&#xff0c;结果却状况百出。下面&#xff0c;就跟大家讲讲我…

一些常用开发软件下载地址

1. Matlab官方下载地址 MATLAB Runtime 是运行由 MATLAB 编译的应用程序&#xff08;如 .exe、.jar 或 .dll&#xff09;所必需的组件&#xff0c;无需安装完整 MATLAB。 &#x1f517; MathWorks 官方下载页面&#xff1a; https://www.mathworks.com/products/compiler/mat…

06-SpringBoot3入门-常见注解(简介)

1、Controller ResponseBody Controller是Spring MVC 中的注解&#xff0c;负责处理 HTTP 请求。 ResponseBody是Spring MVC 中的注解&#xff0c;用于直接将方法的返回值作为 HTTP 响应体。 2、RestController RestController Controller ResponseBody 3、RequestMappin…

ubuntu24.04.2 NVIDIA GeForce RTX 4060笔记本安装驱动

https://www.nvidia.cn/drivers/details/242281/ 上面是下载地址 sudo chmod x NVIDIA-Linux-x86_64-570.133.07.run # 赋予执行权限把下载的驱动复制到家目录下&#xff0c;基本工具准备&#xff0c;如下 sudo apt update sudo apt install build-essential libglvnd-dev …