当前位置：首页 > VUE

vue实现抽屉效果

2026-02-17 15:04:46VUE

使用 Vue 实现抽屉效果

基础实现（基于 Vue 原生功能）

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

vue实现抽屉效果

<template>
  <div>
    <button @click="isOpen = !isOpen">切换抽屉</button>
    <transition name="slide">
      <div v-show="isOpen" class="drawer">
        <p>抽屉内容</p>
      </div>
    </transition>
  </div>
</template>

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

<style>
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  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>

使用第三方库（如 Element UI）

Element UI 提供了现成的 el-drawer 组件，可直接调用。

vue实现抽屉效果

<template>
  <div>
    <button @click="drawer = true">打开抽屉</button>
    <el-drawer
      title="标题"
      :visible.sync="drawer"
      direction="rtl"
      size="50%">
      <span>抽屉内容</span>
    </el-drawer>
  </div>
</template>

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

自定义可复用组件

创建一个可复用的抽屉组件，通过 props 控制行为和样式。

<!-- Drawer.vue -->
<template>
  <transition name="fade">
    <div v-show="isOpen" class="drawer-overlay" @click.self="close">
      <div class="drawer" :class="position">
        <slot></slot>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    isOpen: Boolean,
    position: {
      type: String,
      default: 'right' // 可接受 'left', 'right', 'top', 'bottom'
    }
  },
  methods: {
    close() {
      this.$emit('update:isOpen', false)
    }
  }
}
</script>

<style>
.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
}

.drawer {
  position: absolute;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.drawer.right {
  right: 0;
  top: 0;
  bottom: 0;
  width: 300px;
}

/* 其他位置的样式... */
</style>

使用 Teleport（Vue 3）

Vue 3 的 Teleport 功能可以更好地控制抽屉的 DOM 位置。

<template>
  <button @click="isOpen = true">打开抽屉</button>
  <Teleport to="body">
    <div v-if="isOpen" class="drawer-mask" @click="isOpen = false">
      <div class="drawer" @click.stop>
        <button class="close-btn" @click="isOpen = false">×</button>
        <slot></slot>
      </div>
    </div>
  </Teleport>
</template>

<script setup>
import { ref } from 'vue'
const isOpen = ref(false)
</script>