使用 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 组件更加适合我们的应用场景。