Vue 使用getBoundingClientRect()判断某个元素是否在可视区域

比如第一屏未出现支付按钮时，显示底部悬浮按钮，当页面下滑出现支付按钮，则底部悬浮按钮消失。

@/utils/indexjs

isElementNotInViewport在组件内的使用：

相关参考链接：

ElementgetBoundingClientRect()

可以使用拖拽相关事件drag

drag :  元素被拖动时运行的脚本。

dragend :  在拖动 *** 作末端运行的脚本。

dragenter : 当元素元素已被拖动到有效拖放区域时运行的脚本。

dragleave  :   当元素离开有效拖放目标时运行的脚本。

dragover  :   当元素在有效拖放目标上正在被拖动时运行的脚本。

dragstart  :   在拖动 *** 作开端运行的脚本。

drop :当被拖元素正在被拖放时运行的脚本。

移动端需要使用 touch 事件来处理,  建议pc端也使用touch事件, mouse相关事件在HTML5已经不建议使用了

touchstart : 触摸开始（手指放在触摸屏上）

touchmove : 拖动（手指在触摸屏上移动）

touchend : 触摸结束（手指从触摸屏上移开）

touchenter ：移动的手指进入一个dom元素。

touchleave ：移动的手指离开一个dom元素。

还有一个touchcancel，是在拖动中断时候触发。

触摸事件跟鼠标事件的触发先后顺序：Touchstart > toucheend > mousemove > mousedown > mouseup > click

<video ref="videoEle" class="video_channel" width="100%" height="auto" :poster="list[0]img"> <source :src="list[0]video"> </video>

<script>

// ref就是获取Dom, 只是把这个元素获取以后帮到$refs对象里了

Vue$refs['video']play();

</script>

以上就是关于Vue 使用getBoundingClientRect()判断某个元素是否在可视区域全部的内容，包括:Vue 使用getBoundingClientRect()判断某个元素是否在可视区域、在vue脚手架中元素绑定鼠标移动事件onmousemove,当鼠标按下拖拽元素,能在指定元素里左右移动,如何实现、vue.js不使用dom *** 作，如何获取元素等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！