当前位置：首页 > VUE

vue实现抽屉菜单

2026-01-17 07:58:19VUE

Vue 实现抽屉菜单

使用 Vue 过渡和 CSS 实现

通过 Vue 的过渡组件和 CSS 实现抽屉菜单的动画效果。定义一个布尔值控制抽屉的显示和隐藏，利用 CSS 过渡效果实现平滑的滑动。

<template>
  <div>
    <button @click="toggleDrawer">Toggle Drawer</button>
    <transition name="slide">
      <div v-if="isOpen" class="drawer">
        <p>Drawer Content</p>
      </div>
    </transition>
  </div>
</template>

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

<style>
.drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  background: #fff;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

.slide-enter-active, .slide-leave-active {
  transition: transform 0.3s ease;
}

.slide-enter, .slide-leave-to {
  transform: translateX(-100%);
}
</style>

使用第三方库（如 Vuetify）

Vuetify 提供了现成的抽屉组件 v-navigation-drawer，可以快速实现抽屉菜单功能。安装 Vuetify 后直接使用即可。

vue实现抽屉菜单

<template>
  <v-app>
    <v-navigation-drawer v-model="drawer" temporary>
      <v-list>
        <v-list-item title="Menu Item 1"></v-list-item>
        <v-list-item title="Menu Item 2"></v-list-item>
      </v-list>
    </v-navigation-drawer>

    <v-app-bar>
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
    </v-app-bar>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      drawer: false
    };
  }
};
</script>

动态控制抽屉位置

通过动态绑定样式或类名，实现抽屉从不同方向滑入（如左、右、上、下）。以下示例展示从右侧滑入的抽屉。

vue实现抽屉菜单

<template>
  <div>
    <button @click="toggleDrawer">Toggle Right Drawer</button>
    <transition name="slide-right">
      <div v-if="isOpen" class="drawer-right">
        <p>Right Drawer Content</p>
      </div>
    </transition>
  </div>
</template>

<style>
.drawer-right {
  position: fixed;
  top: 0;
  right: 0;
  width: 250px;
  height: 100%;
  background: #fff;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
}

.slide-right-enter-active, .slide-right-leave-active {
  transition: transform 0.3s ease;
}

.slide-right-enter, .slide-right-leave-to {
  transform: translateX(100%);
}
</style>

抽屉菜单与路由结合

将抽屉菜单与 Vue Router 结合，点击菜单项跳转到对应路由。通过 router-link 实现导航功能。

<template>
  <div>
    <button @click="toggleDrawer">Toggle Drawer</button>
    <transition name="slide">
      <div v-if="isOpen" class="drawer">
        <router-link to="/home">Home</router-link>
        <router-link to="/about">About</router-link>
      </div>
    </transition>
  </div>
</template>

响应式抽屉菜单

通过监听窗口大小或设备类型，动态调整抽屉菜单的显示方式。例如在小屏幕上默认隐藏，大屏幕上默认显示。

<template>
  <div>
    <button @click="toggleDrawer">Toggle Drawer</button>
    <transition name="slide">
      <div v-if="shouldShowDrawer" class="drawer">
        <p>Drawer Content</p>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false,
      isMobile: false
    };
  },
  mounted() {
    this.checkScreenSize();
    window.addEventListener('resize', this.checkScreenSize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.checkScreenSize);
  },
  computed: {
    shouldShowDrawer() {
      return !this.isMobile || this.isOpen;
    }
  },
  methods: {
    toggleDrawer() {
      this.isOpen = !this.isOpen;
    },
    checkScreenSize() {
      this.isMobile = window.innerWidth < 768;
    }
  }
};
</script>