vue实现侧边抽屉

使用Vue实现侧边抽屉

Vue可以通过多种方式实现侧边抽屉效果，以下是几种常见方法：

基于Vue原生实现

<template>
  <div>
    <button @click="drawerOpen = !drawerOpen">切换抽屉</button>
    <div class="drawer" :class="{ 'drawer-open': drawerOpen }">
      <div class="drawer-content">
        <!-- 抽屉内容 -->
      </div>
    </div>
  </div>
</template>

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

<style>
.drawer {
  position: fixed;
  top: 0;
  left: -300px;
  width: 300px;
  height: 100%;
  background: #fff;
  transition: left 0.3s ease;
  z-index: 1000;
}

.drawer-open {
  left: 0;
}
</style>

使用Vuetify组件库

Vuetify提供了现成的v-navigation-drawer组件：

<template>
  <v-app>
    <v-navigation-drawer v-model="drawer" temporary>
      <!-- 抽屉内容 -->
    </v-navigation-drawer>
    <v-app-bar>
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
    </v-app-bar>
  </v-app>
</template>

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

使用Element UI组件库

Element UI提供了el-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-drawer

安装vue-drawer插件：

npm install vue-drawer --save

使用示例：

<template>
  <div>
    <button @click="toggleDrawer">Toggle Drawer</button>
    <vue-drawer
      :show.sync="showDrawer"
      :width="300"
      @close="showDrawer = false">
      <div slot="drawer">抽屉内容</div>
    </vue-drawer>
  </div>
</template>

<script>
import VueDrawer from 'vue-drawer'

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

响应式抽屉实现

可以根据屏幕宽度自动调整抽屉行为：

<template>
  <div>
    <button @click="toggleDrawer">菜单</button>
    <div class="drawer" :class="{ 'drawer-open': isOpen, 'drawer-mobile': isMobile }">
      <!-- 抽屉内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false,
      isMobile: false
    }
  },
  mounted() {
    this.checkMobile()
    window.addEventListener('resize', this.checkMobile)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.checkMobile)
  },
  methods: {
    toggleDrawer() {
      this.isOpen = !this.isOpen
    },
    checkMobile() {
      this.isMobile = window.innerWidth < 768
      if (!this.isMobile) {
        this.isOpen = true
      }
    }
  }
}
</script>

<style>
.drawer {
  width: 250px;
  transition: transform 0.3s ease;
}

.drawer-mobile {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  transform: translateX(-100%);
  z-index: 1000;
}

.drawer-open.drawer-mobile {
  transform: translateX(0);
}
</style>

带遮罩的抽屉实现

<template>
  <div>
    <button @click="openDrawer">打开抽屉</button>
    <div class="drawer-mask" v-if="isOpen" @click="closeDrawer"></div>
    <div class="drawer" :class="{ 'drawer-open': isOpen }">
      <button class="drawer-close" @click="closeDrawer">×</button>
      <!-- 抽屉内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    openDrawer() {
      this.isOpen = true
      document.body.style.overflow = 'hidden'
    },
    closeDrawer() {
      this.isOpen = false
      document.body.style.overflow = ''
    }
  }
}
</script>

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

.drawer {
  position: fixed;
  top: 0;
  left: -300px;
  width: 300px;
  height: 100%;
  background: #fff;
  transition: left 0.3s ease;
  z-index: 1000;
}

.drawer-open {
  left: 0;
}

.drawer-close {
  position: absolute;
  right: 10px;
  top: 10px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}
</style>

以上方法可以根据项目需求选择适合的实现方式，组件库提供的方法通常更简单快捷，而原生实现则更灵活可控。