本文最初发表于 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>
看看如何堆叠操作选项？停止和节流都使用。
另一个示例可能是当您只想在按下 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);
});
所有这些堆叠的自定义操作都将起作用！对于给定的示例，并非实际用途，但它显示了您可以用它们做的所有事情。
正如您所注意到的，我喜欢命名自定义操作选项，以便在操作中阅读时更容易理解：
个人喜好。您当然可以随意命名它们。
对于许多这样的示例，您通常需要创建单独的操作，但不需要使用自定义操作选项。一旦您看到它们的使用，您就会发现它们有很多用例。
？我将这些自定义操作选项收集在一个名为stimulus-fx的小而整洁的包中；一定要检查一下！如果您觉得有用，请贡献一下！
以上是高级刺激：自定义操作选项的详细内容。更多信息请关注PHP中文网其他相关文章！
