首页 > 其他分享 >vue锚点跳转

vue锚点跳转

时间:2023-10-16 14:45:32浏览次数:39  
标签:vue const top top1 ele 获取 锚点 跳转

直接上答案

// 获取dom元素
const ele = this.$refs['refName'];
// 获取元素距视窗的高度
const top1 = ele ? ele.getBoundingClientRect().top : 0;
// 如果ref是在v-for中定义的,需如下获取
const top1 = ele ? ele[0].getBoundingClientRect().top : 0;
// 获取滚动条的位置
const top2 = document.body.scrollTop || document.documentElement.scrollTop;
// 计算元素距视窗的实际高度
const top = top1 + top2;
// 滚动到相应位置
window.scrollTo(0, top);

标签:vue,const,top,top1,ele,获取,锚点,跳转
From: https://www.cnblogs.com/sangfall/p/17767284.html

相关文章

  • vue自定义样式
    在项目中常常遇到一些页面由后台定制样式呈现,这就需要在页面中动态绑定style,如若定制样式里包含了伪类、媒体查询、hover效果能样式,寻常的v-bind:style内联样式可能就无法满足需求,这里就记录了一个解决办法。那么该如何操作呢,简单举个栗子:首先,我们在需要定制的样式元素上定义一......
  • vue移动鼠标画矩形(抄别人的,下附原文地址)
    1、draw.js/***画布中绘制矩形*参数:cav-画布对象list-矩形数组i-选中矩形下标**//*操作执行方法分发*/exportfunctiondraw(cav,list,i){//画布初始化letctx=cav.getContext('2d');ctx.strokeStyle='blue';ctx.lineWidth=2;......
  • Vue学习笔记(十一):路由管理
      1Vue路由基本使用¶1.1安装¶Vue中默认并不提供路由功能,需要安装其插件Vue-router,如下所示,其中“@3”表示安装版本[email protected]创建路由¶在src目录下创建路由文件目录,目录名为“router”,并在该目录下创建“index.js”文件,文件内容如下所示,代码......
  • [Vue]模板语法和MVVM
    模板语法分为:①插值语法、②指令语法插值语法{{xxx}}指令语法v-bind:attr='xxx' 注意v-bind:只是一种指令,指令可以有很多种。v-bind:可以简写为:<body><divid="root"><h1>插值语法</h1><h3>{{name}}</h3><hr/&g......
  • 天地图 vue引入
    官网使用引入基础引入创建......
  • vue @click.native/stop/prevent
    [email protected]父组件要引用子组件中的点击事件,可以通过@click.native来直接访问子组件中的方法,如果不使用@click.native可在子组件中使用this.$emit('click')来传递事件//父组件<template><div><span>父组件页面</span><search@click="onSubmit"></search&g......
  • 手撕Vue-数据驱动界面改变下
    经过上一篇的介绍,已经实现了观察者模式的基本内容,接下来要完成的就是将上一篇的发布订阅模式运用到Nue中,实现数据驱动界面改变。在监听数据变化的章节当中,根据指定的区域和数据去编译渲染界面这个步骤处,我写了一个注释,这个注释是这样的:第一步:给外界传入的所有数据都添加get/se......
  • Vue源码学习(十一):计算属性computed初步学习
    好家伙,  1.Computed实现原理if(opts.computed){initComputed(vm,opts.computed);}functioninitComputed(vm,computed){//存放计算属性的watcherconstwatchers=vm._computedWatchers={};for(constkeyincomputed){constuser......
  • 开源项目 | 一款基于NodeJs+Vue3的强大的在线设计图片工具
     一、项目概述一款漂亮且功能强大的在线海报图片设计器,仿稿定设计。适用于海报图片生成、电商分享图、文章长图、视频/公众号封面等多种场景。二、技术特性丝滑的操作体验,丰富的交互细节,基础功能完善采用服务端生成图片,确保多端出图统一性,支持各种CSS特性简易AI......
  • vue3中setup
    和vue2不同的是vue3中的script中带有setup标签里面的setup相当于vue2中的data和methds空间可以放置函数,也可以执行函数在写时需要有return返回值<scriptsetup></script>setup执行发生在页面之前所以不能使用this函数,一般通过ref绑定组件上的值进行修改 使用函数例子......