vue实现侧滑导航

Vue 实现侧滑导航的方法

使用 CSS 和 Vue 数据绑定

通过 Vue 的 v-model 或 v-show 控制侧滑菜单的显示与隐藏，结合 CSS 过渡动画实现平滑效果。

<template>
  <div class="sidebar" :class="{ 'active': isOpen }">
    <!-- 菜单内容 -->
  </div>
  <button @click="toggleSidebar">切换菜单</button>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false
    };
  },
  methods: {
    toggleSidebar() {
      this.isOpen = !this.isOpen;
    }
  }
};
</script>

<style>
.sidebar {
  position: fixed;
  width: 250px;
  height: 100%;
  left: -250px;
  transition: left 0.3s ease;
}
.sidebar.active {
  left: 0;
}
</style>

使用第三方库（如 vue-simple-sidebar）

对于快速集成，可以使用现成的 Vue 组件库。安装 vue-simple-sidebar：

npm install vue-simple-sidebar

示例代码：

<template>
  <sidebar-menu :menu="menu" @toggle="handleToggle" />
</template>

<script>
import { SidebarMenu } from 'vue-simple-sidebar';
export default {
  components: { SidebarMenu },
  data() {
    return {
      menu: [
        { title: '首页', path: '/' },
        { title: '关于', path: '/about' }
      ]
    };
  },
  methods: {
    handleToggle(isOpen) {
      console.log('侧栏状态:', isOpen);
    }
  }
};
</script>

结合 Vue Router

若需导航跳转，可将侧滑菜单与 Vue Router 绑定：

<template>
  <div class="sidebar" :class="{ 'active': isOpen }">
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
  </div>
</template>

移动端优化

添加触摸事件支持（如 @touchstart、@touchmove），通过计算滑动距离动态调整侧栏位置：

methods: {
  handleTouchStart(e) {
    this.startX = e.touches[0].clientX;
  },
  handleTouchMove(e) {
    const currentX = e.touches[0].clientX;
    if (currentX - this.startX > 50) {
      this.isOpen = true;
    }
  }
}

注意事项

• 遮罩层处理：侧滑时添加半透明遮罩（z-index 控制层级）。
• 性能优化：避免频繁操作 DOM，使用 CSS 硬件加速（如 transform）。
• 无障碍访问：为按钮添加 aria-expanded 属性，便于屏幕阅读器识别。

以上方法可根据项目需求灵活组合，CSS 方案适合轻量级实现，而第三方库能快速满足复杂交互场景。