vue实现侧边抽屉

Vue 实现侧边抽屉的方法

使用 Vue 原生实现

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

<template>
  <div>
    <button @click="toggleDrawer">Toggle Drawer</button>
    <div class="drawer" v-show="isOpen">
      <div class="drawer-content">
        <!-- 抽屉内容 -->
      </div>
    </div>
  </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: 300px;
  height: 100%;
  background: #fff;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  transform: translateX(-100%);
}

.drawer-content {
  padding: 20px;
}

.drawer.v-show {
  transform: translateX(0);
}
</style>

使用第三方库

Element UI、Vuetify 等流行 UI 框架都提供了现成的抽屉组件。

Element UI 示例：

<template>
  <el-button @click="drawer = true" type="primary">
    Open Drawer
  </el-button>

  <el-drawer
    title="Title"
    :visible.sync="drawer"
    direction="ltr"
    size="50%">
    <span>Drawer Content</span>
  </el-drawer>
</template>

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

Vuetify 示例：

<template>
  <v-app>
    <v-navigation-drawer v-model="drawer" absolute temporary>
      <v-list>
        <v-list-item>
          <v-list-item-content>
            <v-list-item-title>Drawer Content</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <v-btn @click="drawer = !drawer">Toggle Drawer</v-btn>
  </v-app>
</template>

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

动画优化

为抽屉添加更丰富的动画效果，可以结合 Vue 的 <transition> 组件：

<template>
  <div>
    <button @click="showDrawer = !showDrawer">Toggle</button>
    <transition name="slide">
      <div v-if="showDrawer" class="drawer">
        <!-- 内容 -->
      </div>
    </transition>
  </div>
</template>

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

响应式处理

根据屏幕尺寸自动调整抽屉行为：

export default {
  data() {
    return {
      isMobile: false
    }
  },
  mounted() {
    this.checkMobile()
    window.addEventListener('resize', this.checkMobile)
  },
  methods: {
    checkMobile() {
      this.isMobile = window.innerWidth < 768
    }
  }
}