vue实现抽屉效果
Vue 实现抽屉效果的方法
使用 Vue 过渡动画和 CSS
在 Vue 中可以通过 v-if 或 v-show 控制抽屉的显示隐藏，结合 <transition> 组件实现平滑动画效果。
<template>
<div>
<button @click="isOpen = !isOpen">Toggle Drawer</button>
<transition name="slide">
<div v-if="isOpen" class="drawer">
Drawer Content
</div>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
isOpen: false
}
}
}
</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.1);
}
.slide-enter-active, .slide-leave-active {
transition: transform 0.3s ease;
}
.slide-enter, .slide-leave-to {
transform: translateX(100%);
}
</style>使用第三方 UI 库
大多数 Vue UI 组件库都提供了现成的抽屉组件，例如：
Element UI
<el-drawer
title="标题"
:visible.sync="drawer"
direction="rtl">
内容
</el-drawer>Ant Design Vue
<a-drawer
title="Basic Drawer"
placement="right"
:visible="visible"
@close="onClose">
<p>Some contents...</p>
</a-drawer>自定义可复用抽屉组件
创建一个可复用的抽屉组件：
<!-- Drawer.vue -->
<template>
<transition name="fade">
<div v-if="isOpen" class="drawer-overlay" @click.self="close">
<div class="drawer" :class="position">
<slot></slot>
</div>
</div>
</transition>
</template>
<script>
export default {
props: {
isOpen: Boolean,
position: {
type: String,
default: 'right'
}
},
methods: {
close() {
this.$emit('close')
}
}
}
</script>
<style>
.drawer-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 100;
}
.drawer {
position: absolute;
background: white;
width: 300px;
height: 100%;
padding: 20px;
}
.drawer.right {
right: 0;
}
.drawer.left {
left: 0;
}
.fade-enter-active, .fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>使用 Teleport 实现全局抽屉
Vue 3 的 Teleport 可以方便地将抽屉渲染到 body 元素：
<template>
<button @click="isOpen = true">Open Drawer</button>
<teleport to="body">
<drawer :is-open="isOpen" @close="isOpen = false">
<h2>Global Drawer</h2>
</drawer>
</teleport>
</template>这些方法提供了从简单到复杂的不同实现方式，可以根据项目需求选择合适的方案。
