当前位置：首页 > VUE

vue实现抽屉

2026-01-08 01:24:04VUE

Vue 实现抽屉组件

抽屉组件是一种常见的 UI 模式，通常用于从屏幕边缘滑出内容。以下是几种实现抽屉的方法：

使用 Vue 原生实现

创建一个基本的抽屉组件，利用 Vue 的过渡和条件渲染功能。

<template>
  <div class="drawer-container">
    <button @click="toggleDrawer">Toggle Drawer</button>
    <transition name="slide">
      <div v-if="isOpen" class="drawer">
        <slot></slot>
        <button @click="toggleDrawer">Close</button>
      </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: white;
  box-shadow: -2px 0 5px rgba(0,0,0,0.5);
  z-index: 1000;
}

.slide-enter-active, .slide-leave-active {
  transition: transform 0.3s ease;
}

.slide-enter, .slide-leave-to {
  transform: translateX(100%);
}
</style>

使用第三方库

Element UI 和 Ant Design Vue 等流行 UI 库提供了现成的抽屉组件。

Element UI 示例：

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

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

Ant Design Vue 示例：

<template>
  <a-button type="primary" @click="showDrawer">Open Drawer</a-button>
  <a-drawer
    title="Basic Drawer"
    placement="right"
    :closable="false"
    :visible="visible"
    @close="onClose">
    <p>Some contents...</p>
  </a-drawer>
</template>

<script>
export default {
  data() {
    return {
      visible: false
    }
  },
  methods: {
    showDrawer() {
      this.visible = true
    },
    onClose() {
      this.visible = false
    }
  }
}
</script>

响应式抽屉

添加响应式功能，根据屏幕宽度调整抽屉大小。

<script>
export default {
  data() {
    return {
      isOpen: false,
      drawerWidth: 300
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize)
    this.handleResize()
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.drawerWidth = window.innerWidth > 768 ? 300 : window.innerWidth * 0.9
    }
  }
}
</script>

无障碍访问

确保抽屉组件符合无障碍标准。

<template>
  <div class="drawer-container">
    <button 
      @click="toggleDrawer"
      :aria-expanded="isOpen"
      aria-controls="main-drawer">
      Toggle Drawer
    </button>
    <transition name="slide">
      <div 
        v-if="isOpen" 
        id="main-drawer"
        class="drawer"
        role="dialog"
        aria-modal="true">
        <slot></slot>
        <button @click="toggleDrawer">Close</button>
      </div>
    </transition>
  </div>
</template>

高级功能

实现点击外部关闭抽屉的功能。

<script>
export default {
  methods: {
    handleClickOutside(event) {
      const drawer = this.$el.querySelector('.drawer')
      if (drawer && !drawer.contains(event.target) && 
          !this.$el.contains(event.target)) {
        this.isOpen = false
      }
    }
  },
  mounted() {
    document.addEventListener('click', this.handleClickOutside)
  },
  beforeDestroy() {
    document.removeEventListener('click', this.handleClickOutside)
  }
}
</script>

以上方法提供了从基础到高级的抽屉实现方案，可以根据项目需求选择合适的实现方式。

vue实现抽屉