vue3获取、设置元素高度

前言

在web端常见的需求场景中,会经常遇到table表格需要根据页面可视区域使高度自适应的情况。 傻喵(作者本人)昨天在尝试使用vue3实现这个需求时,看了几篇网上写的回答,都不太全面,所以干脆自己写个总结吧.(第一次写,轻喷QAQ)

正文

先一起来看看页面结构

image.png

在vue2中,实现这个效果大多是在mounted生命周期中操作DOM元素,进行元素属性的获取和修改。 升级到vue3后,生命周期前都加了on,所以在onMounted这个生命周期中操作DOM。

1、首先获取页面可视区域、header组件,至于为什么在header组件外又套了一层div,是想实验另外一个东西,先卖个关子。

setup(props) {console.log(props);const hd = ref(null);let allHeight = ref("");const test = ref(null);onMounted(() => {//可视区域高度allHeight.value = `${document.documentElement.clientHeight}`;//header组件高度let hdHeight = hd.value.$el.clientHeight;});return {hd,test,clienHeight,};},

const hd = ref(null)定义的名字必须与HTML中<Header ref="hd" />这里的值相同(不相同会报错)

2、接下来就是给test组件高度赋值了,傻喵本来是想直接将值赋值的

test.value.clientHeight = headerHeight;

但是没有实现效果,具体原因不得而知(有知道原因的可以在评论区告诉傻喵).
所以只能用另一种方法,style动态绑定

<Test ref="test" :style="testStyle" />
let testStyle = reactive({ height: "0px", });
testStyle.height = testHeight + "px";

这样终于实现了DOM元素的赋值

3、关于在header组件外多加的一层div,是因为傻喵在获取页面元素时,发现ref获取的组件和div、span等基础标签打印出的结构不同。

image.png

如上图,依次打印的分别为<div ref="top"></div>以及它内部的header组件,基础标签会直接.value打印出来,而header组件会打印出一个Proxy对象(傻喵猜测应该是跟vue3的响应式有关,有待考究)。
这同时导致了获取两者元素属性方式的不同
div属性直接可以const top = ref(null);定义,并通过top.value.clientHeight来获取它的高度。
而header组件必须hd.value.$el.clientHeight才可以.

下面贴上完整代码

<template><div ref="top"><Header ref="hd" /></div><Test ref="test" :style="testStyle" />
</template><script>
import Header from "./components/Header.vue";
import Test from "./components/Test.vue";
import { onMounted, reactive, ref } from "vue";
export default {name: "App",components: {Header,Test,},setup(props) {console.log(props);const hd = ref(null);const top = ref(null);const test = ref(null);let allHeight = ref("");let testStyle = reactive({height: "0px",});onMounted(() => {allHeight.value = `${document.documentElement.clientHeight}`;let hdHeight = hd.value.$el.clientHeight;let testHeight = allHeight.value - hdHeight;testStyle.height = testHeight + "px";console.log(top)console.log(hd)console.log(top.value.clientHeight)console.log(hd.value.$el.clientHeight)});return {hd,top,test,testStyle,allHeight,};},
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin: 0px;padding: 0px;/* margin-top: 60px; */
}
</style>

结语

以上就是傻喵使用vue3来操作元素高度的总结,还有很多坑点需要去研究。 也欢迎各位大大在评论区留言,指点一下。

文章出处:vue3获取、设置元素高度 - 掘金 (juejin.cn)

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

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

相关文章

美畅物联丨观看实时视频对服务器带宽有什么要求?

​随着互联网的迅猛发展&#xff0c;实时视频观看已然成为人们日常生活中不可或缺的一部分。不管是视频会议、在线教育&#xff0c;还是在线娱乐&#xff0c;实时视频都起到了极为重要的作用。不过&#xff0c;实时视频的流畅播放对服务器的带宽有着极高的要求。本文将深入探究…

MongoDB-固定集合(Capped Collection)

在 MongoDB 中&#xff0c;固定集合&#xff08;Capped Collection&#xff09;是一种具有特殊属性的集合。固定集合具有一个固定的最大大小&#xff0c;并且一旦达到该大小时&#xff0c;最早插入的文档将会被自动删除&#xff0c;以便为新的文档腾出空间。固定集合的这种特性…

EasyExcel注解使用

上接《Springboot下导入导出excel》&#xff0c;本篇详细介绍 EasyExcel 注解使用。 1. ExcelProperty value&#xff1a;指定写入的列头&#xff0c;如果不指定则使用成员变量的名字作为列头&#xff1b;如果要设置复杂的头&#xff0c;可以为value指定多个值order&#xff…

yolo-V3

1、研究背景及意义 1&#xff09;对yolo进行创新&#xff0c;准确度更高。 2、创新点 1&#xff09;主要是更换了主干网络&#xff0c;使用了多尺度特征融合。 3、网络结构 yolo-V3以Darket-Net-53为主干网络。网络输入一张尺寸为416416的图片&#xff0c;经过多层卷积分别…

零基础如何使用ChatGPT快速学习Python

引言 AI编程时代来临&#xff0c;没有编程基础可以快速上车享受时代的红利吗&#xff1f;答案是肯定的。本文旨在介绍零基础如何利用ChatGPT快速学习Python编程语言&#xff0c;开启AI编程之路。解决的问题包括&#xff1a;传统学习方式效率低、缺乏互动性以及学习资源质量参差…

重生之我在异世界学编程之C语言:枚举联合篇

大家好&#xff0c;这里是小编的博客频道 小编的博客&#xff1a;就爱学编程 很高兴在CSDN这个大家庭与大家相识&#xff0c;希望能在这里与大家共同进步&#xff0c;共同收获更好的自己&#xff01;&#xff01;&#xff01; 本文目录 引言正文枚举&#xff08;Enum&#xff0…

MYSQL索引的分类和创建

目录 1、聚簇索引和非聚簇索引 tips&#xff1a; 小问题&#xff1a;主键为什么建议使用自增id? 2、普通索引 &#xff08;常规索引&#xff09;(normal) 3、唯一索引&#xff08;UNIQUE &#xff09; 唯一索引和主键的区别&#xff1a; 唯一约束和唯一索引的区别&#…

Robust Depth Enhancement via Polarization Prompt Fusion Tuning

paper&#xff1a;论文地址 code&#xff1a;github项目地址 今天给大家分享一篇2024CVPR上的文章&#xff0c;文章是用偏振做提示学习&#xff0c;做深度估计的。模型架构图如下 这篇博客不是讲这篇论文的内容&#xff0c;感兴趣的自己去看paper&#xff0c;主要是分享环境&…

.NET 一款获取主机远程桌面端口的工具

01阅读须知 此文所提供的信息只为网络安全人员对自己所负责的网站、服务器等&#xff08;包括但不限于&#xff09;进行检测或维护参考&#xff0c;未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。利用此文所提供的信息而造成的直接或间接后果和损失&#xf…

【开源】A066—基于JavaWeb的农产品直卖平台的设计与实现

&#x1f64a;作者简介&#xff1a;在校研究生&#xff0c;拥有计算机专业的研究生开发团队&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的网站项目。 代码可以查看项目链接获取⬇️&#xff0c;记得注明来意哦~&#x1f339; 赠送计算机毕业设计600个选题ex…

vue3+vite+ts 使用webrtc-streamer播放海康rtsp监控视频

了解webrtc-streamer webrtc-streamer 是一个使用简单机制通过 WebRTC 流式传输视频捕获设备和 RTSP 源的项目&#xff0c;它内置了一个小型的 HTTP server 来对 WebRTC需要的相关接口提供支持。相对于ffmpegflv.js的方案&#xff0c;延迟降低到了0.4秒左右&#xff0c;画面的…

C语言基础六:循环结构及面试上机题

Day06&#xff1a;循环结构 定义 代码的重复执行&#xff0c;就叫做循环 循环的分类 无限循环:其实就是死循环&#xff0c;程序设计中尽量避免无限循环。程序中的无限循环必须可控。有限循环:循环限定循环次数或者循环的条件。 循环的构成 循环条件循环体 当型循环的实现…

树莓集团:探索打造数字影像产业新发展

在当今数字化高速发展的时代背景下&#xff0c;树莓集团始终勇立潮头&#xff0c;坚定地踏上了探索打造产业新发展的非凡征程。 产业生态构建是树莓集团战略布局中的关键一环。集团积极与上下游企业开展广泛而深入的合作&#xff0c;建立起一个互利共赢、协同发展的产业生态系…

Linux 基础环境的开发工具以及使用(下)

1. make / Makefile 自动化构建的工具 1&#xff09;引入 在我们进行一些大型的工程的时候&#xff0c;代码量是极其大&#xff0c;当我们代码在进行一系列的编译的时候&#xff0c;难免会出现一些错误&#xff0c;当我们对错误进行一系列的更改之后&#xff0c;难道我们需要…

ERROR: KeeperErrorCode = NoNode for /hbase/master

原因分析 通过上面的情景模拟&#xff0c;我们可以看到报错的原因在于zookeeper中出现问题&#xff0c;可能是zookeeper中的/hbase/master被删除&#xff0c;或者是在hbase集群启动之后重新安装了zookeeper&#xff0c;导致zookeeper中的/hbase/master节点数据异常。 1. 停止…

【 C语言练习(4)—可自己设置游戏规则的猜数字游戏】

C语言练习&#xff08;4&#xff09; 文章目录 C语言练习&#xff08;4&#xff09;前言题目题目解析结果总结 前言 本次写的猜字游戏有两大优点&#xff0c;可重复玩游戏、可自己设置猜数字规则&#xff0c;通过猜数字游戏锻炼循环体和选择结构体 题目 写一个给定猜数次数&a…

【Vulkan入门】08-CreateRenderPass

目录 先叨叨git信息关键代码TestPipeLine::CreateRenderPass() 先叨叨 上篇已经为Pipeline编写好了程序&#xff08;Shader&#xff09;。接下来要为Pipeline创建RenderPass。 关于RenderPass&#xff0c;在【Vulkan入门】06-Pipeline介绍中已经作了简单的介绍。这里再详细说一…

【GitHub分享】you-get项目

【GitHub分享】you-get 一、介绍二、安装教程三、使用教程四、配置ffmpeg五&#xff0c;卸载 如果大家想要更具体地操作可去开源网站查看手册&#xff0c;这里只是一些简单介绍&#xff0c;但是也够用一般&#xff0c;有什么问题&#xff0c;也可以留言。 一、介绍 you-get是一…

【新】ApiHug官方文档-框架介绍-1/10

ApiHug SDK 扩展 https://apihug.com/zhCN-docs/frameworkApiHug SDK 扩展https://apihug.com/zhCN-docs/framework ApiHug - API design Copilot - IntelliJ IDEs Plugin | Marketplacehttps://plugins.jetbrains.com/plugin/23534-apihug--api-design-copilot 快速开启 - …

06-标准库开发-STM32-SPI通信协议软件实现

八、SPI协议在STM32中的软件实现 8.1 SPI协议简介 SPI&#xff08;Serial Peripheral Interface&#xff0c;串行外设接口&#xff09;是由Motorola公司开发的一种同步串行数据通信总线。它主要用于微控制器与外设之间的短距离通信&#xff0c;如传感器、显示屏、存储器模块等…