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;
}
}
