Vue获取点击元素到顶部的距离
//template<div @click="add($event)")></div><div class="top" ref="top"></div>//methodsadd(e){e.currentTarget//获取当前dom元素后可进行操作//获取元素距离视口高度var top1 = e.currentTarget.getBoundingCl
·
//template
<div @click="add($event)")></div>
<div class="top" ref="top"></div>
//methods
add(e){
e.currentTarget //获取当前dom元素后可进行操作
//获取元素距离视口高度
var top1 = e.currentTarget.getBoundingClientRect().top
//获取滚动条位置
var top2 = document.body.scrollTop||document.documentElement.scrollTop
//相加即为元素实际顶部距离
var top = top1 + top2
//使用$ref修改top元素的位置
this.$ref.top.style.top = top + 'px';
//使用classList给top元素添加类名
this.$ref.top.classList.add("classname1");
//add、remove、toggle(检测是否有类名然后添加或删除)
}
更多推荐
已为社区贡献4条内容
所有评论(0)