Vue实现靠边悬浮球的代码

实现靠边悬浮球的代码，可以通过以下步骤来实现：

1. 在Vue组件中，定义一个data属性来存储悬浮球的位置和状态信息，如下所示：

data() {
  return {
    ball: {
      left: 0, // 悬浮球左侧距离屏幕左侧的距离
      top: 0, // 悬浮球顶部距离屏幕顶部的距离
      isFixed: false, // 悬浮球是否固定在边缘
      isLeft: true // 悬浮球是否在左侧边缘
    }
  }
}

2. 在组件的`mounted`钩子函数中，监听窗口的滚动事件，并根据窗口滚动的距离和悬浮球的位置信息，来判断悬浮球是否需要固定在边缘，以及固定在哪个边缘，如下所示：

mounted() {
  window.addEventListener('scroll', () => {
    const ball = this.ball
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    if (scrollTop > ball.top && !ball.isFixed) {
      ball.isFixed = true
      ball.top = 0
      if (ball.left < 100) {
        ball.isLeft = true
        ball.left = 0
      } else {
        ball.isLeft = false
        ball.left = document.documentElement.clientWidth - 100
      }
    } else if (scrollTop <= ball.top && ball.isFixed) {
      ball.isFixed = false
      ball.left = ball.isLeft ? 0 : document.documentElement.clientWidth - 100
    }
  })
}

3. 在组件的模板中，根据悬浮球的位置和状态信息，来动态设置悬浮球的样式和位置，如下所示：

<template>
  <div>
    <div class="ball" :class="{ fixed: ball.isFixed, left: ball.isLeft }" :style="{ left: ball.left + 'px', top: ball.top + 'px' }"></div>
  </div>
</template>

<style scoped>
.ball {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #f00;
  cursor: pointer;
  transition: all 0.3s ease;
}

.ball.fixed {
  position: fixed;
  top: 0;
}

.ball.left {
  left: 0;
}

.ball:not(.left) {
  right: 0;
}

</style>

通过以上步骤，就可以实现一个Vue组件中的靠边悬浮球了。