vue+ts+装饰器 @Ref 获取元素距离顶部的位置

    <div>
      <el-button type="primary" ref="ceshi" @click="goSome">点击</el-button>
    </div>

 
  @Ref() readonly ceshi
  mounted() {
   this.$nextTick(() => {
    console.log(this.ceshi.$el.offsetTop)
    console.log(this.ceshi.$el.getBoundingClientRect().top)
   })
  }

 // 这个是滚动的调用
 goSome() {
    utils.scrollToAppoint(this.ceshi.$el.offsetTop - 60)
  }



// 这种在写的时候 不去主动确定其类型（毕竟好多其实也不清楚是什么类型的）
@Ref() readonly ceshi

// 如果我们确定其类型,也能写的具体些, 但是在使用属性的时候 容易报警~
@Ref('ceshi') readonly ss!: HTMLButtonElement


// 目测HTMLButtonElement应该是 this.ceshi.$el.__proto__的名称

关于@Ref

 

下面的是通过vue的ref获取元素距离顶部的属性,用来做滚动的~

很明显 他们两个的计算方式是不同的~

Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。

MDN的说明　很详细了　此api计算的是相对于视口左上角的值

而offsetTop则是计算的距离其父元素顶部的高度~

需要注意的是 在vue中获取和dom相关的属性的时候 最好加上$nextTick, 毕竟不能确定什么时候渲染完毕

 

下面说下滚动~

 // 调用
 goSome() {
    utils.scrollToAppoint(this.ceshi.$el.offsetTop - 60)
  }


// 在utils中定义的滚动方法
utils.scrollToAppoint = ( to: number, from: number, el: any, duration: number = 500) => {
  if (!window.requestAnimationFrame) {
    window.requestAnimationFrame = window.webkitRequestAnimationFrame
      || function (callback: any): any {
        return window.setTimeout(callback, 1000 / 60)
      }
  }
  
  // 默认滚动的容器为#content  views/home
  el = !el ? document.querySelector('#content') : el
  // 默认为content的滚动条的位置
  from = !from ? el.scrollTop : from

  const difference = Math.abs(from - to);
  const step = Math.ceil((difference / duration) * 50)

  function scroll(start: any, end: any, step: any) {
    if (start === end) return false

    let d = start + step > end ? end : start + step
    if (start > end) { d = start - step < end ? end : start - step }

    if (el === window) {
      window.scrollTo(d, d)
    } else {
      el.scrollTop = d
    }
    window.requestAnimationFrame(() => scroll(d, end, step))
  }
  scroll(from, to, step)
}

 

就是这样啦