vue实现左右悬浮

实现左右悬浮的Vue组件

使用Vue实现左右悬浮效果可以通过固定定位结合动态样式实现。以下是两种常见实现方式：

基础固定定位实现

<template>
  <div class="float-container">
    <div class="float-left" :style="{top: leftTop + 'px'}">
      <!-- 左侧悬浮内容 -->
    </div>
    <div class="float-right" :style="{top: rightTop + 'px'}">
      <!-- 右侧悬浮内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leftTop: 100,
      rightTop: 100
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      this.leftTop = window.scrollY + 100
      this.rightTop = window.scrollY + 100
    }
  }
}
</script>

<style>
.float-left {
  position: fixed;
  left: 20px;
  z-index: 100;
}

.float-right {
  position: fixed;
  right: 20px;
  z-index: 100;
}
</style>

使用VueUse库优化实现

安装VueUse后可以简化滚动监听：

npm install @vueuse/core

优化后的组件代码：

<template>
  <div>
    <div class="float-left" :style="{top: y + 100 + 'px'}">
      <!-- 左侧悬浮内容 -->
    </div>
    <div class="float-right" :style="{top: y + 100 + 'px'}">
      <!-- 右侧悬浮内容 -->
    </div>
  </div>
</template>

<script>
import { useWindowScroll } from '@vueuse/core'

export default {
  setup() {
    const { y } = useWindowScroll()
    return { y }
  }
}
</script>

响应式悬浮布局

针对不同屏幕尺寸调整悬浮元素位置：

@media (max-width: 768px) {
  .float-left, .float-right {
    width: 80px;
    padding: 5px;
  }
}

带关闭功能的悬浮组件

<template>
  <div class="float-right" v-if="!hidden" :style="{top: y + 100 + 'px'}">
    <button @click="hidden = true">×</button>
    <!-- 悬浮内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      hidden: false
    }
  }
}
</script>

悬浮按钮组件封装

可复用的悬浮按钮组件：

<template>
  <div 
    class="float-btn"
    :class="position"
    :style="{top: offset + 'px'}"
    @click="$emit('click')"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    position: {
      type: String,
      default: 'right',
      validator: value => ['left', 'right'].includes(value)
    },
    offset: {
      type: Number,
      default: 100
    }
  }
}
</script>

<style>
.float-btn {
  position: fixed;
  z-index: 100;
  cursor: pointer;
}
.float-btn.left {
  left: 20px;
}
.float-btn.right {
  right: 20px;
}
</style>

使用时：

<float-btn position="left" @click="handleLeftClick">
  <span>左侧按钮</span>
</float-btn>

这些实现方式涵盖了基本的悬浮定位、响应式处理、交互控制和组件封装，可根据实际需求选择或组合使用。