vue+ts+装饰器 @Ref 获取元素距离顶部的位置
<div><el-button type="primary" ref="ceshi" @click="goSome">点击</el-button></div>@Ref() readonly ceshimounted() {this.$nextTick(() => {cons...
·
<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__的名称
下面的是通过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)
}
就是这样啦
更多推荐
已为社区贡献2条内容
所有评论(0)