vue 悬浮按钮组件_Vue悬浮球效果

知识点：

悬浮球有两个知识点：

1)一个是吸边效果。位置判断，然后缓动到目标位置：

获取元素位置属性：this.$refs.refNamexxxx.getBoundingClientRect()

2)一个是页面滚动过程中隐藏悬浮球的防抖。

实现思路：

1、created里获取document.documentElement.clientWidth和clientHeight，(这里插入知识点document.documentElement和document.body的差别)

2、mounted里设置初始位置，并绑定悬浮球的touchstart touchmove touchend以及window.scroll事件

3、touchstart里设置禁止点击以免touch和click事件冲突，同时让transition为none因为跟随手指移动时不需要缓动效果。

4、touchmove中设置悬浮球跟随手指拖动实时改变位置，并且在这里可以设置悬浮球回复可点击。

5、touchend里首先判断悬浮球是否可点击，如上所说以免touch和click事件冲突。然后把transition改为all 0.3s，为了停止拖动后吸边动作的缓动效果。最后就是做吸边动作，将悬浮球的left top设置为目标位置。

6、页面scroll过程中，悬浮球隐藏操作，是在scroll里隐藏悬浮球，然后scroll里做一个防抖，等scroll停下来200ms后执行悬浮球回复显示。

7、最后很重要的是，别忘记在 beforeDestroy里removeEventListener，做一个有始有终良好习惯的程序员。

reference