vue实现侧边栏抽屉

使用 Vue 实现侧边栏抽屉

基础实现（基于 Vue 3 + Composition API）

<template>
  <div class="drawer-container">
    <button @click="toggleDrawer">Toggle Drawer</button>
    <div class="drawer" :class="{ 'drawer-open': isOpen }">
      <div class="drawer-content">
        <slot></slot>
      </div>
    </div>
    <div 
      class="overlay" 
      :class="{ 'overlay-visible': isOpen }"
      @click="toggleDrawer"
    ></div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isOpen = ref(false);

const toggleDrawer = () => {
  isOpen.value = !isOpen.value;
};
</script>

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

.drawer {
  position: fixed;
  top: 0;
  left: -300px;
  width: 300px;
  height: 100vh;
  background: white;
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
  transition: left 0.3s ease;
  z-index: 1000;
}

.drawer-open {
  left: 0;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 999;
}

.overlay-visible {
  opacity: 1;
  pointer-events: all;
}
</style>

使用 Vue Transition 添加动画效果

<template>
  <div>
    <button @click="isOpen = !isOpen">Toggle</button>

    <Transition name="slide">
      <div v-if="isOpen" class="sidebar">
        <!-- 侧边栏内容 -->
      </div>
    </Transition>
  </div>
</template>

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

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

响应式侧边栏实现

<template>
  <div class="responsive-drawer">
    <div 
      class="drawer"
      :class="{
        'mobile-drawer': isMobile,
        'desktop-drawer': !isMobile,
        'open': isOpen
      }"
    >
      <!-- 内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMobile: false,
      isOpen: false
    };
  },
  mounted() {
    this.checkScreenSize();
    window.addEventListener('resize', this.checkScreenSize);
  },
  methods: {
    checkScreenSize() {
      this.isMobile = window.innerWidth < 768;
      if (!this.isMobile) {
        this.isOpen = true;
      }
    }
  }
};
</script>

<style>
.mobile-drawer {
  position: fixed;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.mobile-drawer.open {
  transform: translateX(0);
}

.desktop-drawer {
  position: relative;
  width: 250px;
}
</style>

使用 Vue Router 集成

// router.js
const routes = [
  {
    path: '/',
    component: () => import('@/layouts/MainLayout.vue'),
    children: [
      {
        path: '',
        component: () => import('@/views/Home.vue')
      }
    ]
  }
];

<!-- MainLayout.vue -->
<template>
  <div class="app-layout">
    <AppDrawer :is-open="drawerOpen" @close="drawerOpen = false"/>
    <div class="main-content">
      <router-view/>
    </div>
  </div>
</template>

可复用组件实现

// Drawer.vue
export default {
  props: {
    position: {
      type: String,
      default: 'left',
      validator: value => ['left', 'right', 'top', 'bottom'].includes(value)
    },
    width: {
      type: String,
      default: '300px'
    },
    closeOnClickOutside: {
      type: Boolean,
      default: true
    }
  },
  // 其余实现...
};

/* 根据位置调整样式 */
.drawer-left {
  top: 0;
  left: 0;
  height: 100vh;
  width: v-bind(width);
  transform: translateX(-100%);
}

.drawer-right {
  top: 0;
  right: 0;
  height: 100vh;
  width: v-bind(width);
  transform: translateX(100%);
}

这些实现方式涵盖了从基础到高级的各种侧边栏抽屉场景，可以根据具体需求选择合适的实现方案。