当前位置：首页 > VUE

vue实现侧滑菜单

2026-02-22 09:56:55VUE

Vue 侧滑菜单实现方法

使用 CSS 过渡和 Vue 指令

在 Vue 中可以通过 v-show 或 v-if 控制菜单显示，结合 CSS 过渡效果实现平滑动画。

<template>
  <div class="menu-container">
    <div class="menu-overlay" v-show="isOpen" @click="toggleMenu"></div>
    <div class="side-menu" :class="{ 'open': isOpen }">
      <!-- 菜单内容 -->
    </div>
    <button @click="toggleMenu">切换菜单</button>
  </div>
</template>

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

<style>
.menu-container {
  position: relative;
}

.side-menu {
  position: fixed;
  top: 0;
  left: -250px;
  width: 250px;
  height: 100%;
  background: #fff;
  transition: transform 0.3s ease;
}

.side-menu.open {
  transform: translateX(250px);
}

.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 10;
}
</style>

使用第三方组件库

主流 UI 库如 Vuetify、Element UI 等提供现成的侧滑菜单组件。

vue实现侧滑菜单

Vuetify 示例：

<template>
  <v-navigation-drawer v-model="drawer" temporary>
    <v-list>
      <v-list-item v-for="item in items" :key="item.title" :title="item.title"></v-list-item>
    </v-list>
  </v-navigation-drawer>
</template>

<script>
export default {
  data() {
    return {
      drawer: false,
      items: [
        { title: '首页' },
        { title: '关于' }
      ]
    }
  }
}
</script>

手势滑动支持

添加 touch 事件处理实现手势滑动操作：

vue实现侧滑菜单

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

响应式处理

通过媒体查询适配不同屏幕尺寸：

@media (max-width: 768px) {
  .side-menu {
    width: 200px;
  }
}

状态管理

对于复杂应用，建议使用 Vuex 或 Pinia 管理菜单状态：

// store.js
export default {
  state: {
    menuOpen: false
  },
  mutations: {
    toggleMenu(state) {
      state.menuOpen = !state.menuOpen
    }
  }
}

实现侧滑菜单时需考虑性能优化、无障碍访问和浏览器兼容性等问题。根据项目需求选择合适方案，简单场景可使用纯 CSS 方案，复杂项目建议采用成熟的 UI 组件库。