vue实现右侧弹出

Vue 实现右侧弹出面板

使用 Vue 实现右侧弹出面板可以通过动态控制 CSS 类或结合过渡动画完成。以下是两种常见实现方式：

方案一：基于 CSS 过渡动画

模板部分

<template>
  <div class="panel-container">
    <button @click="togglePanel">打开面板</button>
    <div class="panel-overlay" v-if="isOpen" @click="togglePanel"></div>
    <div class="panel" :class="{ 'panel-active': isOpen }">
      <div class="panel-content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

样式部分

.panel {
  position: fixed;
  top: 0;
  right: -400px; /* 初始隐藏 */
  width: 400px;
  height: 100vh;
  background: white;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  transition: right 0.3s ease;
  z-index: 1000;
}

.panel-active {
  right: 0; /* 显示时定位到右侧 */
}

.panel-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

脚本部分

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

方案二：使用 Vue Transition 组件

模板优化

<template>
  <div>
    <button @click="showPanel = !showPanel">切换面板</button>
    <transition name="slide">
      <div class="right-panel" v-if="showPanel">
        <!-- 面板内容 -->
      </div>
    </transition>
  </div>
</template>

过渡样式

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

.slide-enter-from, .slide-leave-to {
  transform: translateX(100%);
}

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

方案三：第三方库集成

对于复杂场景，可考虑使用现成组件库：

• Vuetify 的 v-navigation-drawer
• Element UI 的 el-drawer
• Ant Design Vue 的 a-drawer

以 Element UI 为例：

<el-drawer
  title="标题"
  :visible.sync="drawerVisible"
  direction="rtl"
  size="50%">
  内容区域
</el-drawer>

关键注意点

• 定位方式建议使用 fixed 或 absolute
• 注意处理滚动条锁定问题（可通过 document.body.style.overflow = 'hidden' 控制）
• 移动端需考虑手势滑动关闭（可通过 touch 事件实现）
• 无障碍访问需添加 aria-* 属性和焦点管理

以上方案均可根据实际需求调整动画时长、面板宽度或交互细节。