Stimulus, Turbo.js 和 Tailwind CSS 实现级联选择器

对于一个级联选择器（Cascader）组件，我们可以使用 Stimulus、Turbo.js 和 Tailwind CSS 来实现。下面是一个简单的实现示例：

首先，我们需要定义一个 Stimulus 控制器来管理 Cascader 组件的行为：

// cascader_controller.js

import { Controller } from 'stimulus'

export default class extends Controller {
  static targets = [ 'select', 'options' ]

  connect() {
    this.selectTarget.addEventListener('change', this.handleChange.bind(this))
  }

  handleChange() {
    const value = this.selectTarget.value
    const option = this.optionsTarget.querySelector(`[data-value='${value}']`)
    if (option) {
      option.click()
    }
  }
}

在上面的代码中，我们定义了 Cascader 控制器，它有两个目标：'select' 和 'options'。'select' 目标是一个 <select> 元素，它用于显示当前已选择的选项。'options' 目标是一个包含所有选项的列表，每个选项都是一个链接。当用户选择一个选项时，我们将更新 'select' 元素的值，并触发相应的事件。

接下来，我们需要在 HTML 中使用 Cascader 控制器：

<!-- cascader.html -->

<div data-controller='cascader'>
  <select data-target='cascader.select'>
    <option value=''>请选择</option>
  </select>
  <ul data-target='cascader.options'>
    <li><a href='#' data-value='1'>选项1</a></li>
    <li><a href='#' data-value='2'>选项2</a></li>
    <li><a href='#' data-value='3'>选项3</a></li>
  </ul>
</div>

在上面的代码中，我们使用了 data-controller 属性来指定 Cascader 控制器，并使用了 data-target 属性来指定控制器的目标元素。我们还添加了一些选项，每个选项都是一个链接，它们的值通过 data-value 属性来指定。

最后，我们需要使用 Turbo.js 和 Tailwind CSS 来处理页面的动态更新和样式：

// application.js

import { Turbo } from '@hotwired/turbo'
import { start } from '@hotwired/turbo-rails'
import { Application } from 'stimulus'
import CascaderController from './cascader_controller'

const application = Application.start()
application.register('cascader', CascaderController)

start()

Turbo.setProgressBarDelay(0)
Turbo.setProgressBarPosition(0)

document.addEventListener('turbo:load', () => {
  Turbo.clearCache()
})

/* application.css */

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

[data-controller='cascader'] {
  display: inline-block;
  position: relative;
}

[data-controller='cascader'] select {
  appearance: none;
  background-color: white;
  border: 1px solid gray;
  border-radius: 3px;
  box-shadow: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
  padding: 0.5em 1em;
  width: 100%;
}

[data-controller='cascader'] ul {
  background-color: white;
  border: 1px solid gray;
  border-radius: 3px;
  box-shadow: none;
  display: none;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 100%;
  width: 100%;
  z-index: 999;
}

[data-controller='cascader'] li {
  display: block;
  margin: 0;
  padding: 0;
}

[data-controller='cascader'] a {
  color: black;
  display: block;
  font-size: 14px;
  line-height: 1.5;
  padding: 0.5em 1em;
  text-decoration: none;
  white-space: nowrap;
}

[data-controller='cascader'] a:hover {
  background-color: gray;
  color: white;
}

[data-controller='cascader'] select:focus + ul {
  display: block;
}

在上面的代码中，我们定义了 Cascader 组件的样式，并使用了 Tailwind CSS 来实现它。我们还使用了 Turbo.js 来处理页面的动态更新，以及用 Stimulus 控制器来管理 Cascader 组件的行为。

现在，我们已经成功地实现了一个 Cascader 组件，用户可以使用它来进行级联选择。