js 实现抽屉

实现抽屉效果（Drawer）的方法

抽屉效果通常用于侧边栏、导航菜单或隐藏内容的展示。以下是几种常见的实现方式：

使用纯CSS实现基础抽屉

通过CSS的transform和transition属性实现动画效果：

<div class="drawer-container">
  <button class="toggle-btn">Toggle Drawer</button>
  <div class="drawer">
    <!-- 抽屉内容 -->
  </div>
</div>

<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: transform 0.3s ease;
}

.drawer.open {
  transform: translateX(300px);
}

.toggle-btn {
  position: fixed;
  left: 20px;
  top: 20px;
  z-index: 100;
}
</style>

<script>
document.querySelector('.toggle-btn').addEventListener('click', function() {
  document.querySelector('.drawer').classList.toggle('open');
});
</script>

使用JavaScript控制复杂交互

通过动态添加/移除类名实现更精细的控制：

const drawer = document.querySelector('.drawer');
const overlay = document.createElement('div');
overlay.className = 'overlay';

document.body.appendChild(overlay);

function toggleDrawer() {
  drawer.classList.toggle('open');
  overlay.classList.toggle('active');
}

// 点击遮罩层关闭
overlay.addEventListener('click', toggleDrawer);

// ESC键关闭
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && drawer.classList.contains('open')) {
    toggleDrawer();
  }
});

对应CSS补充：

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.overlay.active {
  opacity: 1;
  pointer-events: auto;
}

使用第三方库快速实现

1. Material-UI (React)

   
   import { Drawer } from '@mui/material';

function App() { const [open, setOpen] = useState(false);

return (

setOpen(true)}>Open setOpen(false)}> {/* 抽屉内容 */} ); } ```

1. Vuetify (Vue)

   
   <template>
   <v-btn @click="drawer = !drawer">Toggle</v-btn>
   <v-navigation-drawer v-model="drawer" temporary>
    <!-- 抽屉内容 -->
   </v-navigation-drawer>
   </template>

export default { data: () => ({ drawer: false }) } ```

移动端优化要点

• 添加touch事件支持滑动打开/关闭
• 增加边缘拖动手势（类似原生APP）
• 使用will-change: transform提升动画性能
• 考虑position: sticky替代固定定位以适应移动布局

let startX = 0;

drawer.addEventListener('touchstart', (e) => {
  startX = e.touches[0].clientX;
});

drawer.addEventListener('touchmove', (e) => {
  const x = e.touches[0].clientX;
  if (x - startX > 50 && !drawer.classList.contains('open')) {
    drawer.classList.add('open');
  }
});

无障碍访问建议

1. 添加aria-hidden和aria-expanded属性
2. 焦点管理：打开时焦点移至抽屉内，关闭时返回触发按钮
3. 添加适当的角色属性：

   <div class="drawer" role="dialog" aria-modal="true" aria-labelledby="drawer-title">
   <h2 id="drawer-title">导航菜单</h2>
   <!-- 内容 -->
   </div>

以上方法可根据项目需求组合使用，CSS方案适合简单场景，JavaScript方案提供更多控制，框架组件则适合对应技术栈的快速集成。