使用 Stimulus 创建可调整大小的导航

本文最初发布于 Rails Designer——Rails 应用程序的 UI 组件库，使用 ViewComponent 构建，使用 Tailwind CSS 设计并使用 Hotwire 增强。

---

如果您的应用程序有侧边栏导航（这在当今大多数屏幕都足够宽以支持的情况下很常见），那么调整其大小可能是一个很好的添加功能。进行此自定义允许您的用户根据手头的任务调整屏幕。也许他们想专注于编写下一个大作品，或者也许他们分割了屏幕，使默认宽度有点太宽。

无论什么原因，使用 JavaScript 和 Stimulus 都可以轻松调整侧边栏导航（或任何其他组件）的大小。让我们开始吧。让我们在 HTML 中设置基础知识：

<main data-controller="resizer" class="flex">
  <nav data-resizer-target="container" class="relative w-1/6">
    <!-- Imagine some nav items here -->
  </nav>

  <div class="w-5/6">
    <p>Content for your app here</p>
  </div>
</main>

上面的 HTML 使用的是 Tailwind CSS 类，但这对于本示例来说不是必需的。当然，你可以随心所欲地设计它。

现在是刺激控制器。正如您从上面注意到的，handler（可以拖动调整大小的元素）没有添加到 HTML 中，而是会注入 JS。

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="resizer"
export default class extends Controller {
  static targets = ["container"];
  static values = {
    resizing: { type: Boolean, default: false },
    maxWidth: { type: Number, default: 360 } // in px
  };

  connect() {
    this.containerTarget.insertAdjacentHTML("beforeend", this.#handler);
  }

  // private

  get #handler() {
    return `
      <span
        data-action="mousedown->resizer#setup"
        class="absolute top-0 w-1 h-full bg-gray-200 -right-px cursor-col-resize hover:bg-gray-300"
      ></span>
    `
  }
}

这将在导航元素（绝对定位）旁边注入处理程序。它还具有在 mousedown 事件上触发 setup() 的操作。让我们添加它。

export default class extends Controller {
  // …
  connect() {
    this.containerTarget.insertAdjacentHTML("beforeend", this.#handler);

    this.resize = this.#resize.bind(this);
    this.stop = this.#stop.bind(this);
  }

  setup() {
      this.resizingValue = true;

      document.addEventListener('mousemove', this.resize);
      document.addEventListener('mouseup', this.stop);
  }
  // …
}

这是怎么回事？为什么不分别在 mousemove 和 mouseup 事件上添加 #resize() 和 #stop() 呢？这是为了确保当 resize 和 stop 作为事件侦听器调用时 this 引用控制器实例，保留对控制器属性和方法的访问。

让我们添加私有函数#resize() 和#stop()。

export default class extends Controller {
  // …

  // private

  #resize(event) {
    if (!this.resizingValue) return;

    const width = event.clientX - this.containerTarget.offsetLeft;

    if (width <= this.maxWidthValue) {
      this.containerTarget.style.width = `${width}px`;
    } else {
      this.containerTarget.style.width = `${this.maxWidthValue}px`;
    }
  }

  #stop() {
    this.resizingValue = false;

    document.removeEventListener('mousemove', this.resize);
    document.removeEventListener('mouseup', this.stop);
  }

  // …
}

#resize() 函数根据鼠标位置 (event.clientX) 计算容器的新宽度并更新容器的宽度，确保其不超过允许的最大宽度（在值中设置）。 #stop() 函数通过将 resizingValue 设置为 false 并删除事件侦听器来停止调整大小过程。

如果您转到浏览器，您现在可以调整浏览器的大小，并且不会使其比设置的 maxWidth 值（默认为 360px）更宽。

太棒了！ ？这就是使用 Stimulus 调整应用程序中元素大小所需的全部内容。从这里，您可以通过将值存储在用户设置中（例如通过 Redis）来改进，以便在浏览器之间保持相同，或者将其存储在浏览器的 LocalStorage 中以存储该会话（Rails Designer 通过为此提供 JS 实用程序来帮助您）。

以上是使用 Stimulus 创建可调整大小的导航的详细内容。更多信息请关注PHP中文网其他相关文章！