当前位置：首页 > VUE

vue实现抽屉效果

2026-01-16 22:30:58VUE

Vue 实现抽屉效果的方法

使用 Vue 过渡动画和 CSS

在 Vue 中可以通过 v-if 或 v-show 控制抽屉的显示隐藏，结合 <transition> 组件实现平滑动画效果。

<template>
  <div>
    <button @click="isOpen = !isOpen">Toggle Drawer</button>
    <transition name="slide">
      <div v-if="isOpen" class="drawer">
        Drawer Content
      </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: white;
  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>

使用第三方 UI 库

大多数 Vue UI 组件库都提供了现成的抽屉组件，例如：

Element UI

<el-drawer
  title="标题"
  :visible.sync="drawer"
  direction="rtl">
  内容
</el-drawer>

Ant Design Vue

<a-drawer
  title="Basic Drawer"
  placement="right"
  :visible="visible"
  @close="onClose">
  <p>Some contents...</p>
</a-drawer>

自定义可复用抽屉组件

创建一个可复用的抽屉组件：

<!-- Drawer.vue -->
<template>
  <transition name="fade">
    <div v-if="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'
    }
  },
  methods: {
    close() {
      this.$emit('close')
    }
  }
}
</script>

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

.drawer {
  position: absolute;
  background: white;
  width: 300px;
  height: 100%;
  padding: 20px;
}

.drawer.right {
  right: 0;
}

.drawer.left {
  left: 0;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

使用 Teleport 实现全局抽屉

Vue 3 的 Teleport 可以方便地将抽屉渲染到 body 元素：

<template>
  <button @click="isOpen = true">Open Drawer</button>
  <teleport to="body">
    <drawer :is-open="isOpen" @close="isOpen = false">
      <h2>Global Drawer</h2>
    </drawer>
  </teleport>
</template>

这些方法提供了从简单到复杂的不同实现方式，可以根据项目需求选择合适的方案。

vue实现抽屉效果