首页 > 其他分享 >vue3使用 vant ui 3 如何获取组件 popup dom的高度?

vue3使用 vant ui 3 如何获取组件 popup dom的高度?

时间:2024-01-15 14:45:46浏览次数:27  
标签:popup vant dom 获取 ui vantPop

我目前使用的是 vant-ui 3.1.2 popup 弹出层组件,我想要获取弹出层的高度来计算一些东西,但是使用常规定义 ref dom 的方式总是无法获取,最终找到方案如下:

vant-ui 官方文档:https://vant-contrib.gitee.io/vant/v3/#/zh-CN/popup

<template>
  <van-popup
      v-model:show="show"
      closeable
      close-icon="close"
      teleport="body"
      ref="vantPop"
      @open="openElements"
      @close="closeElements"
    >
    </van-popup>
</template>
<script setup>
const vantPop = ref(null)
// 获取 vantPop 的高度
const popHeight = vantPop.value?.popupRef.value.clientHeight 
</script>

 

标签:popup,vant,dom,获取,ui,vantPop
From: https://www.cnblogs.com/beileixinqing/p/17965324

相关文章

  • DOM元素之更改
    通常改变元素涉及三个内容动态改变元素中的内容动态改变元素的CSS属性值改变元素节点的属性改变元素中的内容改变元素中的内容可以使用两个相关属性innerHTML和innerTextinnerHTML属性可以按照HTML语法设置内容,并且浏览器可以正常按照HTML语法渲染innerText属性只能......
  • js DOM 节点元数据
    这样,拿不到弱映射中的健,也就无法取得弱映射中对应的值。虽然这防止了前面提到的访问,但整个代码也完全陷入了ES6之前的闭包私有变量模式。constUser=(()=>{constwm=newWeakMap();classUser{constructor(id){this.idProperty=Symbol('id');......
  • [论文于都] SelfReg: Self-supervised Contrastive Regularization for Domain Genera
    SelfReg:Self-supervisedContrastiveRegularizationforDomainGeneralization采用了自监督对比学习的方法,提出了IndividualizedIn-batchDissimilarityLoss和HeterogeneousIn-batchDissimilarityLoss。IndividualizedIn-batchDissimilarityLoss关注于在训练过程......
  • [论文阅读 ] Domain generalization via feature variation decorrelation
    Domaingeneralizationviafeaturevariationdecorrelation3METHOD在本节中,我们首先在第3.2节解释我们的动机。然后,在第3.3节中,我们介绍特征变化的解缠和讨论方差转移的想法。最后,在第3.4节中,我们提出了我们的新颖特征变化解相关损失。图2显示了所提出方法的框架。3.1Prob......
  • 使用RanDom生成不重复的随机数
    首先看一下关键词的傻瓜讲解Random用法Random.Next()返回非负随机数;Random.Next(a)返回一个小于a的非负随机数Random.Next(a,b)返回一个大于a小于b的非负随机数contains用法list.Contains(a)判断列表list里是否含有a,有则返回true接下来看代码staticvoidMain(string[]args)......
  • 【五期李伟平】CCF-A(AAAI'21)Game of Gradients: Mitigating Irrelevant Clients in Fe
    Nagalapatti,Lokesh,andR.Narayanam."GameofGradients:MitigatingIrrelevantClientsinFederatedLearning."(2021).  针对联邦学习中相关客户端选择(FRCS)的问题,本文提出一种可以选择具有相关数据的客户端的方法,并提出一个检测拥有特定目标标签数据的客户端......
  • Java set-cooike cookie.setDomain错误
    javacookie.setDomain(".test.com");错误Therewasanunexpectederror(type=InternalServerError,status=500).Aninvaliddomain[.test.com]wasspecifiedforthiscookiepublicvoidsetCookie(HttpServletResponseresponse,Stringtoken){/......
  • HTML DOM对象-方法和属性
    HTMLDOM对象-方法和属性一些常用的HTMLDOM方法:getElementById(id)-获取带有指定id的节点(元素)getElementsByTagName()  返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。 返回节点列表。节点列表是一个节点数组。getElementsByClassName()  返回......
  • dom内置对象有哪些
    Laravel是一个流行的PHP框架,它具有出色的可测试性,可以帮助开发人员在更短的时间内编写可靠的代码。但是,即使使用了这个框架,也可能会出现测试覆盖率较低的情况。测试覆盖率是指代码中已由测试案例覆盖的部分比例。测试覆盖率越高,代码质量越高。在本文中,我们将分享几种技巧,帮助您提......
  • 浅谈WPF之Popup弹出层
    在日常开发中,当点击某控件时,经常看到一些弹出框,停靠在某些页面元素的附近,但这些又不是真正的窗口,而是页面的一部分,那这种功能是如何实现的呢?今天就以一个简单的小例子,简述如何在WPF开发中,通过Popup实现鼠标点击弹出浮动停靠窗口,仅供学习分享使用,如有不足之处,还请指正。 什么是......