hotwiredstimulus 和 tailwindcss 实现像element-plus 一样的多级Cascader 级联选择器

要实现像 element-plus 一样的多级 Cascader 级联选择器，可以使用 @hotwired/stimulus 和 tailwindcss。

首先，安装 @hotwired/stimulus 和 tailwindcss：

npm install @hotwired/stimulus tailwindcss

然后，创建一个 Cascader 控制器：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["input", "list"]

  connect() {
    this.hideList()
  }

  toggleList() {
    this.listTarget.classList.toggle("hidden")
  }

  hideList() {
    this.listTarget.classList.add("hidden")
  }
}

这个控制器有两个 targets：input 和 list。input 是一个输入框，用于显示当前选择的值。list 是一个下拉列表，用于显示可选的选项。

在 connect 方法中，我们将 list 隐藏起来。

在 toggleList 方法中，我们使用 toggle 方法将 list 的 hidden 类切换为 true 或 false，从而显示或隐藏 list。

在 hideList 方法中，我们将 list 的 hidden 类设置为 true，从而隐藏 list。

接下来，我们创建一个 Cascader 模板：

<div data-controller="cascader">
  <div class="relative">
    <input
      type="text"
      data-cascader-target="input"
      class="block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
      readonly
    >
    <div
      data-cascader-target="list"
      class="absolute z-10 w-full py-1 mt-1 bg-white rounded-md shadow-lg"
    >
      <ul class="divide-y divide-gray-200">
        <li>
          <button class="w-full px-4 py-2 text-left">
            Option 1
          </button>
        </li>
        <li>
          <button class="w-full px-4 py-2 text-left">
            Option 2
          </button>
        </li>
        <li>
          <button class="w-full px-4 py-2 text-left">
            Option 3
          </button>
        </li>
      </ul>
    </div>
  </div>
</div>

这个模板包含一个输入框和一个下拉列表。输入框使用 tailwindcss 的样式，用于显示当前选择的值。下拉列表使用 tailwindcss 的样式，用于显示可选的选项。

在输入框和下拉列表中，我们使用 data-cascader-target 属性指定对应的 target。

在下拉列表中，我们使用 button 元素代替 a 元素作为选项，这是因为 a 元素会触发页面跳转，而 button 元素不会。

现在，我们就可以使用 Cascader 了：

<div data-controller="cascader">
  <div class="relative">
    <input
      type="text"
      data-cascader-target="input"
      class="block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
      readonly
    >
    <div
      data-cascader-target="list"
      class="absolute z-10 w-full py-1 mt-1 bg-white rounded-md shadow-lg"
    >
      <ul class="divide-y divide-gray-200">
        <li>
          <button class="w-full px-4 py-2 text-left" data-action="click->cascader#toggleList">
            Option 1
          </button>
        </li>
        <li>
          <button class="w-full px-4 py-2 text-left" data-action="click->cascader#toggleList">
            Option 2
          </button>
        </li>
        <li>
          <button class="w-full px-4 py-2 text-left" data-action="click->cascader#toggleList">
            Option 3
          </button>
        </li>
      </ul>
    </div>
  </div>
</div>

在每个选项的 button 中，我们使用 data-action 属性指定 click 事件触发的操作，这里是调用 cascader 控制器的 toggleList 方法。

现在，我们就可以实现像 element-plus 一样的多级 Cascader 级联选择器了。