1

当创建一个在某个事件（例如“悬停”时）应该始终执行相同操作的 Stimulus 组件时，设置该操作的首选方式是什么？

我想写这个，例如：

<a data-controller="tooltip" title="something">Show a tooltip on hover</a>

代替

<a data-controller="tooltip" title="something" data-action="hover->tooltip#showTooltip">Show a tooltip on hover</a>

data-action="hover->tooltip#showTooltip"如果刺激组件的唯一要点是在悬停时显示工具提示，包括对我来说感觉非常多余。

我现在正在通过在initialize()函数中手动添加事件侦听器来执行此操作，但我不确定这是否是个好主意：

export default class Tooltip extends Controller { 
  initialize(){
    this.element.addEventListener("hover", showTooltip())
  }

  showTooltip(){
    // ...
  }
}
4

2 回答 2

1

据我所知，Stimulus 没有默认事件支持，但是手动添加事件监听器是可行的，只是不要在initialize()方法中这样做。用于connect()添加和disconnect()删除侦听器。我将展示一个有关click事件的示例，但它应该与hover.

您的侦听器必须将控制器设置为this，否则您将无法访问目标和值。这就是我添加以下内容的原因：this.clickListener = this.confirm.bind(this);. 或者您可以使用箭头函数代替bind，如下所示：

this.clickListener = (event) => this.confirm(event);

两者的工作原理相同。所以这里是完整的例子：

import { Controller } from 'stimulus';

export default class extends Controller {
    connect() {
        this.clickListener = this.confirm.bind(this);
        this.element.addEventListener('click', this.clickListener);
    }

    disconnect() {
        this.element.removeEventListener('click', this.clickListener);
    }

    confirm(event) {
        event.preventDefault();
        console.log(event);
    }
}
于 2021-06-24T14:31:13.910 回答
0

这有点多余，但这里不需要初始化方法。我认为 Stimulus 的正确操作是mouseover. 这可能就是为什么悬停不能正常工作的原因。

并注意您在数据操作中的方法的情况。我倾向于将在数据操作中调用的所有方法都设为单个单词、小写（即。showtooltip）。这样我就不必记住奇怪的命名约定。

更重要的是，这并不是 Stimulus 真正处于最佳状态的情况。大多数 CSS 框架都有一个工具提示插件，它使用了一些 jQuery 或 vanilla JS。Stimulus 非常适合模块化 JS。例如，我用它来构建带有 HighCharts 的图表。我可以设置数据集值，如“url”、“chartTitle”、“yAxisTitle”，在我的刺激控制器中调用它们，并为我网站上的每个折线图使用相同的控制器。GoRails 有一个关于如何使用 Stimulus 制作 Cocoon 克隆的视频。您正在使用镊子从 25 工具瑞士军刀中取出碎片。你能行的; 你只是不会真正看到拥有小刀的好处。

于 2021-01-14T14:14:42.523 回答