stimulus 和 turbo js 实现一个cascader

对于一个 Cascader 组件，我们需要实现以下功能：

展示多级菜单，每个菜单项可以展开子菜单；
点击某个菜单项，可以选择该项；
点击某个菜单项，可以展开该项的子菜单；
点击空白区域或者取消按钮，可以关闭 Cascader。

在使用 Stimulus 和 Turbo.js 实现 Cascader 组件时，可以按照以下步骤进行：

创建一个 Cascader 控制器，并在 HTML 中引用该控制器。

// cascader_controller.js
import { Controller } from "stimulus";
export default class extends Controller {
  // ...
}

// HTML
<div data-controller="cascader">
  <!-- Cascader HTML -->
</div>

在 Cascader 控制器中定义数据和方法，包括菜单数据、选中项、展开状态等。

// cascader_controller.js
export default class extends Controller {
  // 菜单数据
  static menus = [
    { label: "A", value: "a", children: [{ label: "A-1", value: "a-1" }] },
    { label: "B", value: "b", children: [{ label: "B-1", value: "b-1" }] },
    { label: "C", value: "c", children: [{ label: "C-1", value: "c-1" }] },
  ];

  // 选中项
  selectedValue = null;

  // 展开状态
  expandedMenuValue = null;

  // 方法
  selectMenu(event) {...}
  toggleMenu(event) {...}
  closeMenu(event) {...}
  // ...
}

编写 Cascader HTML，包括菜单项和控制按钮。

<!-- Cascader HTML -->
<div class="cascader">
  <div class="cascader-menu">
    <ul>
      <li>
        <button>Menu 1</button>
        <ul>
          <li>
            <button>Submenu 1-1</button>
          </li>
          <li>
            <button>Submenu 1-2</button>
          </li>
        </ul>
      </li>
      <li>
        <button>Menu 2</button>
        <ul>
          <li>
            <button>Submenu 2-1</button>
          </li>
          <li>
            <button>Submenu 2-2</button>
          </li>
        </ul>
      </li>
    </ul>
  </div>
  <div class="cascader-control">
    <button>Cancel</button>
  </div>
</div>

在 Cascader 控制器中实现方法，实现 Cascader 的功能。

// cascader_controller.js
export default class extends Controller {
  // ...

  // 选中菜单项
  selectMenu(event) {
    const value = event.target.dataset.value;
    this.selectedValue = value;
    this.expandedMenuValue = null;
  }

  // 切换菜单展开状态
  toggleMenu(event) {
    const value = event.target.dataset.value;
    this.expandedMenuValue = this.expandedMenuValue === value ? null : value;
  }

  // 关闭 Cascader
  closeMenu(event) {
    this.selectedValue = null;
    this.expandedMenuValue = null;
  }

  // ...
}

在 Cascader HTML 中使用 data 属性和 Stimulus 提供的 data-* API，将数据和方法绑定到 HTML 元素上。

<!-- Cascader HTML -->
<div class="cascader" data-cascader-target="cascader">
  <div class="cascader-menu">
    <ul>
      <li>
        <button data-action="click->cascader#toggleMenu" data-value="1">Menu 1</button>
        <ul data-cascader-target="menu" data-cascader-value="1" class="cascader-menu-submenu">
          <li>
            <button data-action="click->cascader#selectMenu" data-value="11">Submenu 1-1</button>
          </li>
          <li>
            <button data-action="click->cascader#selectMenu" data-value="12">Submenu 1-2</button>
          </li>
        </ul>
      </li>
      <li>
        <button data-action="click->cascader#toggleMenu" data-value="2">Menu 2</button>
        <ul data-cascader-target="menu" data-cascader-value="2" class="cascader-menu-submenu">
          <li>
            <button data-action="click->cascader#selectMenu" data-value="21">Submenu 2-1</button>
          </li>
          <li>
            <button data-action="click->cascader#selectMenu" data-value="22">Submenu 2-2</button>
          </li>
        </ul>
      </li>
    </ul>
  </div>
  <div class="cascader-control">
    <button data-action="click->cascader#closeMenu">Cancel</button>
  </div>
</div>

使用 CSS 样式美化 Cascader，使其更加美观易用。

以上就是使用 Stimulus 和 Turbo.js 实现 Cascader 组件的步骤。在实现过程中，我们可以根据实际需求对代码进行优化和改进，使得 Cascader 组件更加适合我们的应用场景。