【Vue3】vue3通过ref获取元素离顶部的距离

这篇具有很好参考价值的文章主要介绍了【Vue3】vue3通过ref获取元素离顶部的距离。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue3通过ref获取元素离顶部的距离

vue3版本 ^3.2.45

  • [ref].value.$el.getBoundingClientRect().top
    • 通过ref获取元素。
    • 使用 getBoundingClientRect().top 获取离顶部的距离

homeView.vue

<div ref="mTab" >........</div>
<script>
import { ref } from 'vue';

export default {
  name: 'home',
  setup() {
    const mTab = ref(null)

//....

  console.log(mTab.value.$el.getBoundingClientRect().top);


  //.....
    return {
      mTab,
    };
  },
}
</script>

效果图

vue获取元素距离顶部的距离,Vue3,vue.js,javascript,前端文章来源地址https://www.toymoban.com/news/detail-612009.html

到了这里,关于【Vue3】vue3通过ref获取元素离顶部的距离的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3之ref取render形式组件jsx元素节点

    [2023 年 7 月 28 日 22:16:06] 一开始注意到组件 setup 和 render 一起使用的情况,好奇怎么通过 ref 取到 render 中 jsx 里的节点,一开始试了以下的尝试,结果是 undefined 的: 后来经过大佬指点,改成以下形式: render 这一步就很像 react 里 jsx 的写法了,react 里也有回调 ref,都是一样

    2024年02月15日
    浏览(43)
  • vue3创建和获取循环动态ref

    定义如下: 然后在需要循环赋值ref的元素上使用setRef,具体如下 此时每个元素的值便都存boxRefs数组中了,使用方法和使用数组无异,如下

    2024年02月16日
    浏览(40)
  • vue3中ref获取子组件的值

    一、 script setup 通过ref获取子组件的值或方法 父组件: 子组件: 二、setup()通过ref获取子组件值 父组件: 子组件:

    2024年02月16日
    浏览(36)
  • vue3使用ref获取dom结果为‘null’

    在vue2中,我们使用ref获取dom元素时是这样子的: 在vue3中,我们使用ref获取dom元素时是这样子的: 下面来说说vue3中获取dom为空的原因: setup的return中应该抛出ref封装的字段,否则ref的值只是定义了并不能响应式使用,事实上,所有ref或者reactive定义的值都应在return中抛出。

    2024年02月12日
    浏览(61)
  • vue3获取标签元素

    在Vue2中,我们获取元素都是通过给元素一个  ref  属性,然后通过  this.$refs.xx  来访问的,但这在Vue3中已经不再适用了。 来看看Vue3中是如何获取元素的吧: 获取元素的操作一共分为以下几个步骤: 先给目标元素的  ref  属性设置一个值,假设为  el 然后在  setup  函数中

    2024年02月12日
    浏览(45)
  • uni-app使用vue3,在元素或组件实例上添加ref,用this.$refs显示undefined

    项目中引用了一个UI组件库,在表单上添加了`ref`属性,方便提交时验证。触发提交方法时显示不存在这个方法或this.$refs为undefined。 解决方法: 引入`getCurrentInstance`,t得到当前组件实例,然后用`ctx.$refs`代替`this.$refs`。这里的`ctx`相当于全局this。 ------------------ 2023/10/27更新-

    2024年02月07日
    浏览(49)
  • vue3中ref获取不到组件实例&&数组中对象的属性值去重

    1、vue3中ref获取不到组件实例 原因 :使用语法糖的组件是默认关闭的,也即通过模板 ref 或者 $parent 链获取到的组件的公开实例,不会暴露任何在 script setup 中声明的绑定。 解决方法 : 为了在 语法糖组件中明确要暴露出去的属性,使用 defineExpose 编译器宏将需要暴露出去的变

    2024年02月11日
    浏览(44)
  • Vue3通过JS修改Css样式(附节点获取相关知识)

    方法一:通过获取节点style(获取标签节点) 方法二:通过动态设置class 方法三:直接动态设置style  附节点获取相关知识

    2024年02月16日
    浏览(42)
  • js获取元素到可视区的距离/浏览器窗口滚动距离/元素距离浏览器顶部距离

    1. js获取元素距离可视区的各种距离 2. js获取浏览器窗口滚动距离 3. js获取元素实际距离页面距离(包括滚动距离) (1).如果父辈元素中有定位的元素,那么就返回距离当前元素最近的定位元素边缘的距离。 (2).如果父辈元素中没有定位元素,那么就返回相对于body边缘距

    2024年02月12日
    浏览(49)
  • vue3 ref()

    通常我们在获取子组件的数据和方法的操作 解决  ref 对子组件进行数据的获取以及方法的触发 不同  需要在子组件 通过defineExpose进行方法的,数据的 暴露 案例   父组件 子组件

    2024年02月13日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包