帮我封装一个下拉框组件

好的，我可以为您提供一个基本的下拉框组件封装代码，您可以根据自己的需求进行修改和扩展：

class Dropdown {
  constructor(selector) {
    this.$el = document.querySelector(selector);
    this.$el.addEventListener('click', this.onClick.bind(this));
    this.$current = this.$el.querySelector('.dropdown__current');
    this.$menu = this.$el.querySelector('.dropdown__menu');
    this.$items = this.$menu.querySelectorAll('.dropdown__item');
    this.isOpen = false;
  }

  onClick(event) {
    event.preventDefault();
    if (event.target.closest('.dropdown__current')) {
      this.toggle();
    } else if (event.target.closest('.dropdown__item')) {
      this.select(event.target.dataset.id);
    } else {
      this.close();
    }
  }

  toggle() {
    this.isOpen ? this.close() : this.open();
  }

  open() {
    this.$el.classList.add('open');
    this.isOpen = true;
  }

  close() {
    this.$el.classList.remove('open');
    this.isOpen = false;
  }

  select(id) {
    const item = this.$menu.querySelector(`[data-id="${id}"]`);
    this.$current.textContent = item.textContent;
    this.close();
  }
}

您可以使用这个组件来创建下拉框，例如：

<div class="dropdown">
  <div class="dropdown__current">请选择</div>
  <ul class="dropdown__menu">
    <li class="dropdown__item" data-id="1">选项1</li>
    <li class="dropdown__item" data-id="2">选项2</li>
    <li class="dropdown__item" data-id="3">选项3</li>
  </ul>
</div>

然后在您的 JavaScript 文件中，创建一个新的 Dropdown 实例：

const dropdown = new Dropdown('.dropdown');

这样就可以使用这个下拉框组件了。