当前位置：首页 > VUE

vue实现左侧抽屉

2026-02-20 04:41:53VUE

Vue 实现左侧抽屉

使用 Vue 实现左侧抽屉可以通过多种方式完成，以下是几种常见的方法：

使用 Element UI 的 Drawer 组件

Element UI 提供了现成的 Drawer 组件，可以快速实现左侧抽屉效果。

安装 Element UI：

npm install element-ui

在 Vue 文件中引入并使用 Drawer 组件：

<template>
  <div>
    <el-button @click="drawer = true" type="primary">打开抽屉</el-button>
    <el-drawer
      title="标题"
      :visible.sync="drawer"
      direction="ltr"
      :before-close="handleClose">
      <span>抽屉内容</span>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawer: false
    }
  },
  methods: {
    handleClose(done) {
      // 关闭前的回调
      done()
    }
  }
}
</script>

使用 Vue 原生实现

如果不依赖第三方库，可以通过 Vue 的原生功能实现抽屉效果。

<template>
  <div>
    <button @click="toggleDrawer">打开抽屉</button>
    <div class="drawer" :class="{ 'drawer-open': isOpen }">
      <div class="drawer-content">
        <span>抽屉内容</span>
        <button @click="toggleDrawer">关闭</button>
      </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: -300px;
  width: 300px;
  height: 100%;
  background: #fff;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  transition: left 0.3s ease;
}
.drawer-open {
  left: 0;
}
</style>

使用 Vuetify 的 Navigation Drawer

Vuetify 也提供了 Navigation Drawer 组件，适合 Material Design 风格的应用。

安装 Vuetify：

npm install vuetify

在 Vue 文件中使用 Navigation Drawer：

<template>
  <v-app>
    <v-navigation-drawer v-model="drawer" absolute temporary>
      <v-list>
        <v-list-item>
          <v-list-item-content>
            <v-list-item-title>抽屉内容</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    <v-btn @click="drawer = !drawer">打开抽屉</v-btn>
  </v-app>
</template>

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

使用 CSS 过渡效果

可以通过 CSS 过渡效果增强抽屉的打开和关闭动画。

<template>
  <div>
    <button @click="toggleDrawer">打开抽屉</button>
    <div class="drawer-overlay" v-if="isOpen" @click="toggleDrawer"></div>
    <div class="drawer" :class="{ 'drawer-open': isOpen }">
      <span>抽屉内容</span>
    </div>
  </div>
</template>

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

<style>
.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.drawer {
  position: fixed;
  top: 0;
  left: -300px;
  width: 300px;
  height: 100%;
  background: #fff;
  z-index: 1000;
  transition: transform 0.3s ease;
}
.drawer-open {
  transform: translateX(300px);
}
</style>

以上方法可以根据项目需求选择适合的方式实现左侧抽屉功能。

vue实现左侧抽屉