vue实现侧边固定图标

Vue 实现侧边固定图标的方法

使用 CSS 固定定位

在 Vue 组件的样式中，通过 position: fixed 实现图标固定定位。调整 top、right、bottom 或 left 属性控制位置。

<template>
  <div class="fixed-icon">
    <i class="icon">图标</i>
  </div>
</template>

<style scoped>
.fixed-icon {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
}
.icon {
  font-size: 24px;
  color: #42b983;
}
</style>

动态控制显示/隐藏

结合 Vue 的 v-show 或 v-if 指令，根据滚动位置或用户交互动态控制图标显示。

<template>
  <div 
    class="fixed-icon" 
    v-show="isVisible"
    @click="handleClick"
  >
    <i class="icon">↑</i>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: false
    };
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      this.isVisible = window.scrollY > 300;
    },
    handleClick() {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  }
};
</script>

使用第三方库（如 vue-affix）

对于复杂场景，可引入 vue-affix 等库简化实现。

安装依赖：

npm install vue-affix

示例代码：

<template>
  <affix relative-element-selector="#content">
    <div class="fixed-icon">
      <i class="icon">📌</i>
    </div>
  </affix>
</template>

<script>
import VueAffix from 'vue-affix';
export default {
  components: { VueAffix }
};
</script>

响应式适配

通过媒体查询确保图标在不同设备上合理显示。

@media (max-width: 768px) {
  .fixed-icon {
    right: 10px;
    bottom: 10px;
  }
  .icon {
    font-size: 18px;
  }
}