如何从单击按钮在Elixir Phoenix中触发模态弹出窗口

huangapple
go评论74阅读模式
英文:

How to trigger the modal popup from click a button in ELixir Phoenix

问题

Phoenix 1.7生成器提供了一个位于"CoreComponents"中的模态框。
说明中没有解释如何切换它。我在处理Elixir Phoenix方面不太擅长，正在尝试学习。

基本语法是：

  1. <.modal
  2. id="user-modal"
  3. show >

"show"属性是触发弹出窗口的属性。

在JavaScript中，要触发模态框，通常需要使用布尔值来切换"show"属性的值。在Elixir中，我不知道如何做到这一点，也不知道开发者是否期望采用这种方法来实现。

文档在这里：

  1. <.modal id="confirm-modal">
  2.   你确定吗？
  3.   <:confirm>确定</:confirm>
  4.   <:cancel>取消</:cancel>
  5. </.modal>
  7. JS命令可以传递给`:on_cancel`和`on_confirm`属性，以便调用者对每个按钮按下作出反应，例如：
  9. <.modal id="confirm" on_confirm={JS.push("delete")} on_cancel={JS.navigate(~p"/posts")}>
  10.   你确定吗？
  11.   <:confirm>确定</:confirm>
  12.   <:cancel>取消</:cancel>
  13. </.modal>

这个示例并没有明确显示"show"属性，但在来自Phoenix生成器的下面的工作示例中，使用了"show"属性。

  1. <.modal
  2.   :if={@live_action in [:new, :edit]}
  3.   id="user-modal"
  4.   show
  5.   on_cancel={JS.navigate(~p"/users")}
  6. >;
  8. <.live_component
  9.     module={AppxWeb.UserLive.FormComponent}
  10.     id={@user.id || :new}
  11.     title={@page_title}
  12.     action={@live_action}
  13.     user={@user}
  14.     patch={~p"/users"}
  15.   />
  16. </.modal>

我好奇如何思考这个问题的解决过程。正如我所说，在JavaScript中，它是一个事件处理程序和一个布尔值。

"show"属性看起来不像一个字符串，所以我不知道如何以动态方式处理它。

英文:

Phoenix 1.7 generator comes with a modal in "CoreComponents".
The instructions do not explain how to toggle it. I am not very good at working with Elixir Phoenix and I am trying to learn.

The base syntax is:

  1.   &lt;.modal
  2.   id=&quot;user-modal&quot;
  3.   show &gt;

The show attribute is what triggers the popup.

In JavaScript, to trigger a modal you typically have a boolean to toggle the "show" attribute value. In Elixir I have no idea how to do that nor do I know if that is the approach that is expected of the developer to make it work.

The documentation is here:

  1.       &lt;.modal id=&quot;confirm-modal&quot;&gt;
  2.         Are you sure?
  3.         &lt;:confirm&gt;OK&lt;/:confirm&gt;
  4.         &lt;:cancel&gt;Cancel&lt;/:cancel&gt;
  5.       &lt;/.modal&gt;
  7.   JS commands may be passed to the `:on_cancel` and `on_confirm` attributes
  8.   for the caller to react to each button press, for example:
  10.       &lt;.modal id=&quot;confirm&quot; on_confirm={JS.push(&quot;delete&quot;)} on_cancel={JS.navigate(~p&quot;/posts&quot;)}&gt;
  11.         Are you sure you?
  12.         &lt;:confirm&gt;OK&lt;/:confirm&gt;
  13.         &lt;:cancel&gt;Cancel&lt;/:cancel&gt;
  14.       &lt;/.modal&gt;

The example does not explicitly show the show attribute, In the working example below from the phoenix generator the show attribute is used.

  2. &lt;.modal
  3.   :if={@live_action in [:new, :edit]}
  4.   id=&quot;user-modal&quot;
  5.   show
  6.   on_cancel={JS.navigate(~p&quot;/users&quot;)}
  7. &gt;
  9. &lt;.live_component
  10.     module={AppxWeb.UserLive.FormComponent}
  11.     id={@user.id || :new}
  12.     title={@page_title}
  13.     action={@live_action}
  14.     user={@user}
  15.     patch={~p&quot;/users&quot;}
  16.   /&gt;
  17. &lt;/.modal&gt;

I'm curious what the thought process is to think about this problem. Like I said, in JavaScript it's an Event Handler and a boolean.

The show attribute doesn't look like a string so I have no idea how to handle it dynamically.

答案1

得分: 0

这是答案。这是两行代码。使用的是ID，而不是show属性。

  1. &lt;.modal
  2.     id=&quot;user-modal&quot;
  3. &gt;
  4. &lt;/.modal&gt;
  6. &lt;button phx-click={show_modal(&quot;user-modal&quot;)}&gt;  Click me &lt;/button&gt;
英文:

Here's the answer. It's two lines of code. The ID is used and not the show attribute.

  1.  &lt;.modal
  2.     id=&quot;user-modal&quot;
  3.     &gt;
  4.   &lt;/.modal&gt;
  7. &lt;button phx-click={show_modal(&quot;user-modal&quot;)}&gt;  Click me &lt;/button&gt;

huangapple
  • 本文由 发表于 2023年3月3日 23:44:09
  • 转载请务必保留本文链接：https://go.coder-hub.com/75629153.html
  • elixir
  • phoenix-framework
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定