当前位置：首页 > VUE

vue实现侧滑菜单

2026-01-21 18:42:39VUE

Vue 实现侧滑菜单的方法

使用 CSS 过渡和 Vue 指令

通过 Vue 的 v-show 或 v-if 控制菜单显示，结合 CSS 过渡实现平滑动画效果。定义一个 isMenuOpen 数据属性，通过按钮点击切换状态。

vue实现侧滑菜单

<template>
  <div>
    <button @click="toggleMenu">Toggle Menu</button>
    <div class="menu" :class="{ 'open': isMenuOpen }">
      <!-- 菜单内容 -->
    </div>
    <div class="overlay" v-show="isMenuOpen" @click="toggleMenu"></div>
  </div>
</template>

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

<style>
.menu {
  position: fixed;
  top: 0;
  left: -250px;
  width: 250px;
  height: 100%;
  background: #333;
  transition: transform 0.3s ease;
}
.menu.open {
  transform: translateX(250px);
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}
</style>

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

对于更复杂的交互，可以使用现成的 Vue 组件库。安装 vue-simple-sidenav 后直接引入使用。

vue实现侧滑菜单

npm install vue-simple-sidenav

<template>
  <div>
    <button @click="toggleNav">Toggle Menu</button>
    <sidenav :show="showNav" @close="showNav = false">
      <!-- 菜单内容 -->
    </sidenav>
  </div>
</template>

<script>
import Sidenav from 'vue-simple-sidenav';

export default {
  components: { Sidenav },
  data() {
    return {
      showNav: false
    };
  },
  methods: {
    toggleNav() {
      this.showNav = !this.showNav;
    }
  }
};
</script>

手势支持（滑动触发）

结合 hammer.js 或 @vueuse/gesture 实现触摸滑动操作。监听滑动手势，动态计算菜单位移。

<template>
  <div ref="menu" class="menu" :style="{ transform: `translateX(${offsetX}px)` }">
    <!-- 菜单内容 -->
  </div>
</template>

<script>
import { useSwipe } from '@vueuse/gesture';

export default {
  setup() {
    const menu = ref(null);
    const offsetX = ref(-250);

    useSwipe(menu, {
      onSwipe(e) {
        offsetX.value = Math.min(e.delta[0], 0);
      },
      onSwipeEnd(e) {
        if (e.delta[0] > 100) offsetX.value = 0;
        else offsetX.value = -250;
      }
    });

    return { offsetX, menu };
  }
};
</script>

状态管理（Vuex/Pinia）

当侧滑菜单需要跨组件控制时，通过状态管理集中管理状态。

// store.js (Pinia 示例)
import { defineStore } from 'pinia';

export const useMenuStore = defineStore('menu', {
  state: () => ({
    isOpen: false
  }),
  actions: {
    toggle() {
      this.isOpen = !this.isOpen;
    }
  }
});

<!-- 组件中使用 -->
<script setup>
import { useMenuStore } from './store';
const menu = useMenuStore();
</script>

<template>
  <button @click="menu.toggle()">Toggle</button>
  <div class="menu" :class="{ open: menu.isOpen }"></div>
</template>