当前位置：首页 > VUE

vue实现侧边固定图标

2026-01-23 04:20:42VUE

Vue 实现侧边固定图标

使用 CSS 固定定位

在 Vue 组件中，可以通过 CSS 的 position: fixed 属性实现侧边固定图标。创建一个样式类，将图标固定在屏幕右侧或左侧。

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

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

添加交互功能

为固定图标添加点击事件或其他交互功能，例如展开菜单或返回顶部。

<template>
  <div class="fixed-icon" @click="handleClick">
    <i class="icon">📌</i>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }
  }
}
</script>

使用第三方库

可以使用第三方库如 vue-affix 或 vue-sticky 实现更复杂的固定效果。

安装 vue-affix：

npm install vue-affix

在组件中使用：

<template>
  <affix>
    <div class="fixed-icon">
      <i class="icon">📌</i>
    </div>
  </affix>
</template>

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

响应式设计

通过媒体查询调整固定图标在不同屏幕尺寸下的位置或大小。

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

动态显示/隐藏

根据滚动位置动态显示或隐藏固定图标。

<template>
  <div class="fixed-icon" v-show="isVisible">
    <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 > 200;
    }
  }
}
</script>

通过以上方法，可以在 Vue 中轻松实现侧边固定图标，并根据需求添加交互和响应式功能。

vue实现侧边固定图标