Stimulus 和 TurboJS 实现级联选择器 - 类 Element Plus Cascader

首先，需要了解 Stimulus 和 TurboJS 是什么。Stimulus 是一个针对 Web 页面中的 DOM 元素和事件的微型 JavaScript 框架。TurboJS 是一个用于加速 Web 应用程序的 JavaScript 库，它可以通过预加载和缓存来提高页面的响应速度。

对于像 Element Plus 中的 Cascader 级联选择器，可以使用 Stimulus 和 TurboJS 来实现。下面是一个基本示例：

1. 首先，需要在页面中引入 Stimulus 和 TurboJS 的库文件。

2. 然后，在 HTML 中创建一个 Cascader 组件的容器。

<div data-controller='cascader'>
  <input type='text' data-target='cascader.input'>
  <ul data-target='cascader.list'>
    <li data-target='cascader.item' data-id='1'>Item 1</li>
    <li data-target='cascader.item' data-id='2'>Item 2</li>
    <li data-target='cascader.item' data-id='3'>Item 3</li>
  </ul>
</div>

3. 接下来，创建一个 Cascader 控制器。

import { Controller } from 'stimulus'
import Turbo from '@hotwired/turbo'

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

  connect() {
    this.inputTarget.addEventListener('click', this.showList)
    this.itemTargets.forEach(item => {
      item.addEventListener('click', this.selectItem)
    })
  }

  disconnect() {
    this.inputTarget.removeEventListener('click', this.showList)
    this.itemTargets.forEach(item => {
      item.removeEventListener('click', this.selectItem)
    })
  }

  showList = () => {
    this.listTarget.classList.toggle('show')
    Turbo.actions.refresh.perform()
  }

  selectItem = event => {
    const item = event.currentTarget
    const itemId = item.dataset.id
    const itemText = item.textContent
    this.inputTarget.value = itemText
    this.listTarget.classList.remove('show')
    Turbo.actions.refresh.perform()
  }
}

4. 最后，在页面底部的 JavaScript 中启用 Stimulus。

import { Application } from 'stimulus'
import CascaderController from './cascader_controller'

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

这样就实现了一个简单的 Cascader 组件。当用户点击输入框时，会显示下拉列表，用户可以选择其中一个项，选择后下拉列表会隐藏，同时输入框会显示所选项的文本内容。同时，使用 TurboJS 的 refresh 动作来更新页面的状态，提高页面的响应速度。