Action 放页面其他位置无法弹出 Modal

xiaomlove

定义了一个页面继承自 Page，创建了一个 Action，在 getActions() 返回渲染在页面右上角，在 getViewData() 中返回在页面中任意位置直接使用渲染。

`protected function getActions(): array
{
return [
$this->buildEnableDisableAction(),
];
}

private function buildEnableDisableAction()
{
    return Actions\Action::make('enableDisable')
        ->requiresConfirmation()
        ->modalHeading('ssss')
        ->modalButton('bbbbb')
        ->form([
            Forms\Components\TextInput::make('sss')
        ])
        ->action(function ($data) {
           dd($data);
        });
}

protected function getViewData(): array
{
    return [
        'enableDisableAction' => $this->buildEnableDisableAction(),
    ];
}`

假如 getActions() 中不返回即右上角没有，这个 Action 无法弹出 modal。右上角有的时候，就都能弹出。查看两个地方最终生成的 html 是一样的。这是什么原因？

管理员

看了一下 Page 源码，大概梳理了一下按钮点击的流程：
当你按下 Enable disable 按钮之后，会触发 $wire:target=mountAction('enableDisable') ，mountAction() 方法调用了 $this->getMountedAction()，最终会去查找 cacheActions() 方法，其中有这么一段代码：

protected function cacheActions(): void
{
$actions = Action::configureUsing(
     Closure::fromCallable([$this, 'configureAction']),
     fn (): array => $this->getActions(),
);
...

也就是说，你如果没有在 getActions() 中对其注册，moutAction() 是无法通过 $action = $this->getMountedAction(); 这个语句获取到 $action, 也就无法在据此进行后续 dispatchBrowserEvent 操作

 public function mountAction(string $name)
    {
        $this->mountedAction = $name;

        $action = $this->getMountedAction();

        if (! $action) {
            return;
        }

        if ($action->isDisabled()) {
            return;
        }

        $this->cacheForm(
            'mountedActionForm',
            fn () => $this->getMountedActionForm(),
        );

        if ($action->hasForm()) {
            $action->callBeforeFormFilled();
        }

        app()->call($action->getMountUsing(), [
            'action' => $action,
            'form' => $this->getMountedActionForm(),
        ]);

        if ($action->hasForm()) {
            $action->callAfterFormFilled();
        }

        if (! $action->shouldOpenModal()) {
            return $this->callMountedAction();
        }

        $this->resetErrorBag();

        $this->dispatchBrowserEvent('open-modal', [
            'id' => 'page-action',
        ]);
    }

xiaomlove

这就有点坑了，还想着在页面任意位置使用 Action。这个功能在 V3 中可以提一下吧

管理员

xiaomlove 现在也是可以实现的，代码可能稍微复杂一点。既然预定义的菜单是通过 mountAction() 方法，在里面获取 getAction(), 然后再 dispatchBrowserEvent('open-modal', ['id' => 'page-action',]); .

你也可以用类似的方式构造，比如类似于这样：

//自定义 view 中，可以使用自己的方法比如mountCustomAction去触发 action 或者也可以重写 mountAction 方法
$wire:target = mountCustomAction('action-name')

自定义 Page:

public function mountCustomAction(string $name)
{
      $this->mountedCustomAction = $name;
     
     $action = $this->getMountedAction(); //重写 getMountedAction 方法，验证调用的 action 有没有在getCustomActions() 中注册。此处重写是因为 page.blade.php 页面 
      ...
      ...
      $this->dispatchBrowserEvent('open-modal', [
            'id' => 'page-action',
        ]);
}

//注册自定义 Action
public function getCustomActions(){
          
}

甚至你可以可以在视图中自己另外写一个 modal。

这是我的一点思路，参考当前 Page 类中 Action 的实现方式。感觉上可行，但未实际验证，有兴趣的话你也可以参考研究一下。

xiaomlove

还有，这里发帖或回复实际是成功，但却提示错误。