当前位置：首页 > VUE

vue抽屉组件实现

2026-03-28 23:50:50VUE

实现 Vue 抽屉组件的基本步骤

使用 Vue 的 v-if 或 v-show 控制抽屉的显示与隐藏，结合 CSS 过渡动画实现平滑效果。以下是一个基础实现示例：

<template>
  <div>
    <button @click="toggleDrawer">打开抽屉</button>
    <div class="drawer-container" v-show="isOpen">
      <div class="drawer-content">
        <button @click="toggleDrawer">关闭</button>
        <slot></slot>
      </div>
      <div class="drawer-backdrop" @click="toggleDrawer"></div>
    </div>
  </div>
</template>

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

<style>
.drawer-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

.drawer-content {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  background: white;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
  z-index: 1001;
  transform: translateX(0);
  transition: transform 0.3s ease;
}

.drawer-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.drawer-container.v-show-false .drawer-content {
  transform: translateX(100%);
}
</style>

使用第三方库快速实现

对于更复杂的抽屉组件，可以使用现成的 UI 库：

Element UI:

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

Ant Design Vue:

<a-drawer :visible="visible" @close="onClose">
  内容区域
</a-drawer>

Vuetify:

<v-navigation-drawer v-model="drawer" temporary>
  内容区域
</v-navigation-drawer>

自定义高级功能

对于需要自定义的高级抽屉组件，可以考虑以下增强功能：

添加方向控制（左/右/上/下）
实现可拖拽调整大小
添加响应式宽度
支持嵌套抽屉
集成路由控制

<template>
  <div>
    <button @click="openDrawer('left')">左侧抽屉</button>
    <button @click="openDrawer('right')">右侧抽屉</button>

    <div class="drawer" :class="[position, { 'is-active': isOpen }]">
      <div class="drawer-content">
        <slot></slot>
      </div>
      <div class="drawer-backdrop" @click="closeDrawer"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    position: {
      type: String,
      default: 'left',
      validator: value => ['left', 'right', 'top', 'bottom'].includes(value)
    }
  },
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    openDrawer(position) {
      this.position = position
      this.isOpen = true
    },
    closeDrawer() {
      this.isOpen = false
    }
  }
}
</script>