Alpine.js 如何绑定到名称中带点的 DOM 事件

Question

使用 Alpine.js 版本 2.7.3，组件可以 listen to DOM events 使用 x-on:[event].[modifiers]。

但是使用什么语法来监听带有点的事件名称，例如 bootstrap 的 show.bs.modal？

在Vue.js中，这可以通过自定义指令（来自this question）来完成，但我认为自定义指令不能在Alpine.js

中创建

Answer 1

目前无法实现，因为 Alpine.js 使用点 (.) 表示指令修饰符。

Answer 2

一种迂回的方法是侦听文档上的自定义事件名称，然后使用 Alpine.js 可以处理的不同名称重新调度事件。

document.addEventListener('event.with.dots', function(evt, p1, ...) {
  // params and references to elements will depend on your requirement
  alpineComponentElement.dispatchEvent(new Event('eventwithnodots', {bubbles: true}))
})

<div x-data>
  <div x-on:eventwithnodots="$event"></div>
</div>

Answer 3

您可以使用 .dot 修饰符以点为目标事件名称，该修饰符会将任何破折号替换为点。例如，如果您要定位 show.bs.modal，您可以这样做：

<div x-data>
    <div @show-bs-modal.dots="console.log($event)"></div>
</div>

详情请见https://alpinejs.dev/directives/on#dot。

Alpine.js 如何绑定到名称中带点的 DOM 事件

Alpine.js how to bind to DOM events with dots in the name

javascript

dom-events

alpine.js