当前位置：首页 > VUE

vue实现抽屉效果

2026-03-09 03:31:52VUE

使用 Vue 实现抽屉效果

方法一：基于 Vue 原生指令和过渡动画

创建一个抽屉组件，利用 Vue 的 v-if 或 v-show 控制显示隐藏，结合 CSS 过渡动画实现平滑效果。

组件代码示例：

<template>
  <div>
    <button @click="toggleDrawer">Toggle Drawer</button>
    <transition name="slide">
      <div v-if="isOpen" class="drawer">
        <div class="drawer-content">
          <p>Drawer Content Here</p>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false
    };
  },
  methods: {
    toggleDrawer() {
      this.isOpen = !this.isOpen;
    }
  }
};
</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-from, .slide-leave-to {
  transform: translateX(100%);
}
</style>

方法二：使用第三方库（如 Element UI）

Element UI 提供了现成的抽屉组件 el-drawer，可以快速实现功能。

安装 Element UI：

npm install element-ui

使用示例：

vue实现抽屉效果

<template>
  <div>
    <button @click="drawer = true">Open Drawer</button>
    <el-drawer
      title="Drawer Title"
      :visible.sync="drawer"
      direction="rtl"
      size="50%">
      <p>Drawer Content Here</p>
    </el-drawer>
  </div>
</template>

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

方法三：自定义可复用的抽屉组件

创建一个可复用的抽屉组件，支持动态内容和配置。

Drawer.vue 组件：

<template>
  <transition name="fade">
    <div v-if="isOpen" class="drawer-overlay" @click="close">
      <div class="drawer" @click.stop>
        <slot></slot>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    isOpen: {
      type: Boolean,
      required: true
    }
  },
  methods: {
    close() {
      this.$emit('close');
    }
  }
};
</script>

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

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  background: #fff;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
}

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

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

父组件使用：

vue实现抽屉效果

<template>
  <div>
    <button @click="openDrawer">Open Drawer</button>
    <Drawer :isOpen="drawerOpen" @close="drawerOpen = false">
      <p>Custom Content Here</p>
    </Drawer>
  </div>
</template>

<script>
import Drawer from './Drawer.vue';

export default {
  components: { Drawer },
  data() {
    return {
      drawerOpen: false
    };
  },
  methods: {
    openDrawer() {
      this.drawerOpen = true;
    }
  }
};
</script>

方法四：结合 Vuex 管理状态

对于复杂应用，可以使用 Vuex 管理抽屉的全局状态。

Vuex Store 示例：

// store.js
export default new Vuex.Store({
  state: {
    drawerOpen: false
  },
  mutations: {
    toggleDrawer(state) {
      state.drawerOpen = !state.drawerOpen;
    }
  }
});

组件中使用：

<template>
  <div>
    <button @click="toggleDrawer">Toggle Drawer</button>
    <Drawer :isOpen="$store.state.drawerOpen" @close="toggleDrawer"/>
  </div>
</template>

<script>
import Drawer from './Drawer.vue';

export default {
  components: { Drawer },
  methods: {
    toggleDrawer() {
      this.$store.commit('toggleDrawer');
    }
  }
};
</script>