js实现抽屉

实现抽屉效果的JavaScript方法

使用纯JavaScript实现抽屉效果（通常指侧边栏滑动或元素展开/折叠）可以通过操作DOM元素的样式属性完成。以下是两种常见实现方式：

方式一：通过classList切换显示状态

<style>
  .drawer {
    width: 250px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: -250px;
    transition: left 0.3s ease;
  }
  .drawer.open {
    left: 0;
  }
</style>

<button id="toggleBtn">切换抽屉</button>
<div class="drawer" id="myDrawer">抽屉内容</div>

<script>
  const toggleBtn = document.getElementById('toggleBtn');
  const drawer = document.getElementById('myDrawer');

  toggleBtn.addEventListener('click', () => {
    drawer.classList.toggle('open');
  });
</script>

方式二：直接操作style属性

const drawer = document.getElementById('myDrawer');
let isOpen = false;

function toggleDrawer() {
  isOpen = !isOpen;
  drawer.style.left = isOpen ? '0' : '-250px';
}

使用CSS Transform优化性能

对于更流畅的动画效果，可以使用CSS transform代替left属性：

.drawer {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
.drawer.open {
  transform: translateX(0);
}

添加遮罩层实现

完整抽屉组件通常包含遮罩层：

<style>
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
  }
</style>

<div class="mask" id="mask"></div>

<script>
  const mask = document.getElementById('mask');

  toggleBtn.addEventListener('click', () => {
    const isOpen = drawer.classList.toggle('open');
    mask.style.display = isOpen ? 'block' : 'none';
  });

  mask.addEventListener('click', () => {
    drawer.classList.remove('open');
    mask.style.display = 'none';
  });
</script>

响应式抽屉实现

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

function handleResponsive() {
  if (window.innerWidth > 768) {
    drawer.classList.add('open');
  } else {
    drawer.classList.remove('open');
  }
}

window.addEventListener('resize', handleResponsive);

使用Web Components封装

创建可复用的抽屉组件：

class MyDrawer extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          position: fixed;
          width: 250px;
          height: 100vh;
          background: white;
          transform: translateX(-100%);
          transition: transform 0.3s ease;
          z-index: 100;
        }
        :host([open]) {
          transform: translateX(0);
        }
      </style>
      <slot></slot>
    `;
  }

  toggle() {
    this.hasAttribute('open') 
      ? this.removeAttribute('open')
      : this.setAttribute('open', '');
  }
}

customElements.define('my-drawer', MyDrawer);

这些方法提供了从基础到高级的抽屉实现方案，可根据具体需求选择或组合使用。