高级刺激：自定义操作选项

本文最初发表于 Rails Designer

---

Stimulus 允许您注册自己的自定义操作选项。这些是您可以附加到操作中的内容，例如 keypress->input#validate:prevent（如有关您（不）知道的刺激功能的文章中所示）。 :prevent 是一个操作选项，将阻止默认事件。其他可用选项包括：:stop 和 :self。

您也可以创建自己的！让您从 Stimulus 中获得更多收益（谁会想到一个朴素的框架有很多功能？！）。

我想列出一些建议，帮助您了解他们可以做什么，并激励您自己制作。

基础知识

您可以使用Application.registerActionOption方法创建自己的操作选项。然后，该方法将根据您添加的逻辑返回 true 或 false。

基础知识如下：

// app/javascript/controllers/application.js
import { Application } from "@hotwired/stimulus"

const application = Application.start()

application.registerActionOption("fire", ({ event, value }) => {
  // any logic that returns true/false
}

当它返回true时，它附加到的操作将运行。使用方式如下：click->controller#action:fire。

现在基础知识已经清楚了，让我们看一些如何使用它的示例。

外出时

常见的操作是单击元素外部以隐藏它，例如使用模态框或下拉菜单。逻辑应该是这样的：

application.registerActionOption("whenOutside", ({ event, element }) => {
  return !element.contains(event.target);
});

您的刺激控制器可能如下所示：

// app/javascript/controllers/dropdown_controller.js
import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static targets = ["menu"];

  show() {
    this.menuTarget.removeAttribute("hidden");
  }

  hide() {
    this.menuTarget.setAttribute("hidden", true);
  }
}

然后在您的 HTML 中：

<div data-controller="dropdown">
  <button data-action="dropdown#show:stop">Show</button>

  <ul data-dropdown-target="menu" data-action="click@window->dropdown#hide:whenOutside">
  </ul>
</div>

只有当您使用 data-dropdown-target="menu" 单击 ul 外部时，才会隐藏目标。您注意到：停止操作选项了吗？我在《你（不）知道的刺激特征》一文中对此进行了探讨。

节流

现在假设您的 dropdown_controller.js 有一个 toggle 方法，并且您只希望用户出于某种原因每 1000 毫秒切换一次它（没有判断！）。

const throttles = new WeakMap();

application.registerActionOption("throttled", ({ element }, { wait = 1000 } = {}) => {
  if (!throttless.has(element)) {
    throttles.set(element, 0);
  }

  const now = Date.now();
  const lastRun = throttles.get(element);

  if (now - lastRun >= wait) {
    throttles.set(element, now);

    return true;
  }

  return false;
});

每 1000 毫秒只会返回一次 true。

？弱映射？搞什么？！我正在写一本书，所以它不那么可怕！为 Rails 开发者预订 JavaScript.

让我们用 toggle 方法扩展 dropdown_controller.js ：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["menu"];

  show() {
    this.menuTarget.removeAttribute("hidden");
  }

  toggle() {
    this.menuTarget.toggleAttribute("hidden");
  }

  hide() {
    this.menuTarget.setAttribute("hidden", true);
  }
}

像这样使用它：

<div data-controller="dropdown">
  <button data-action="dropdown#show:stop:throttled">Show</button>

  <ul data-dropdown-target="menu" data-action="click@window->dropdown#hide:whenOutside">
  </ul>
</div>

看看如何堆叠操作选项？停止和节流都使用。

与Metakey

另一个示例可能是当您只想在按下 meta () 或 ctrl 键时打开下拉菜单

application.registerActionOption("withMetaKey", ({ event }) => {
  return event.metaKey;
});

在 HTML 中使用它，如下所示：

<div data-controller="dropdown">
  <button data-action="dropdown#show:stop:throttled:withMetaKey">Show</button>

  <ul hidden data-clicker-target="menu" data-action="click@window->dropdown#hide:whenOutside">
    <li>Menu Item</li>
  </ul>
</div>

只有在单击时同时按下 cmd/ctrl 时才会显示下拉菜单。

再来一个？再来一张！

带确认

想要在显示下拉列表之前显示确认对话框吗？

// app/javascript/controllers/application.js
import { Application } from "@hotwired/stimulus"

const application = Application.start()

application.registerActionOption("fire", ({ event, value }) => {
  // any logic that returns true/false
}

并在您的 HTML 中：

application.registerActionOption("whenOutside", ({ event, element }) => {
  return !element.contains(event.target);
});

所有这些堆叠的自定义操作都将起作用！对于给定的示例，并非实际用途，但它显示了您可以用它们做的所有事情。

正如您所注意到的，我喜欢命名自定义操作选项，以便在操作中阅读时更容易理解：

• 单击@window->dropdown#hide:whenOutside;
• 单击->dropdown#show:withMetakey。

个人喜好。您当然可以随意命名它们。

对于许多这样的示例，您通常需要创建单独的操作，但不需要使用自定义操作选项。一旦您看到它们的使用，您就会发现它们有很多用例。

？我将这些自定义操作选项收集在一个名为stimulus-fx的小而整洁的包中；一定要检查一下！如果您觉得有用，请贡献一下！

以上是高级刺激：自定义操作选项的详细内容。更多信息请关注PHP中文网其他相关文章！