README

verbant/wn-livewire-plugin 包提供在 WinterCMS 项目中加载 Livewire 组件的选项。

安装

您可以通过 composer 安装此包。

composer require verbant/wn-livewire-plugin

用法

此包支持在主题、插件或后端中使用 Livewire 组件。每种用法都需要特定的方法。

主题使用

插件在顶部菜单栏中创建一个菜单项“Livewire”，以及一个“组件”侧菜单项。您可以添加新组件或修改现有组件。标记标签页包含 Livewire 标记，代码标签页包含包含回调函数的 Livewire PHP 类。

插件组件使用

组件注册

组件和后端 Livewire 组件需要注册，以便 Livewire 可以找到标记及其支持类。您通过创建一个返回组件信息的数组并返回的公共函数 registerLivewireComponents() 来注册这些组件。此数组的每个元素具有以下布局

    'component name' => ['LivewireClass' => Class of Livewire, 'ViewName' => 'name of view in components|controllers/component name', 'ViewPath' => "full path to this view"];

组件使用

插件可以定义一个同时具有 Livewire 标记和 Livewire PHP 类的组件。您仍然可以拥有其他组件部分，并使用 twig {% partial %} twig 指令按常规方式渲染这些部分。Livewire 标记通过 {% component %} 指令渲染，并按注册时定义的 ViewName 渲染标记。

插件后端使用

插件可以拥有支持 Livewire 组件的后端控制器。标记可能位于 controllers/controller 名称目录中。Livewire PHP 类也可能在那里。要渲染 Livewire 组件，请调用

$this->renderLivewire("name", [optional arguments]); somewhere in a PHP markup-file.

安装

在您的页面或布局的 head 标签中添加以下标签，并在 body 标签结束之前

<html>
<head>
    ...
    {{ livewireStyles() }}
</head>
<body>
    ...
    {{ livewireScripts() }}
</body>
</html>

示例

主题示例

通过在顶部栏选择“Livewire”然后从侧边栏选择“添加 +”来创建 Livewire 组件。将其命名为 counter。在标记标签页中，输入

<div class="input-group py-3 w-25">
    <button wire:click="add" class="btn btn-outline-secondary">
        Add
    </button>
    <div class="form-control">
      {{ count }}
    </div>
    <button wire:click="subtract" class="btn btn-outline-secondary">
        Subtract
    </button>
</div>

在代码标签页中，输入

public $count = 1;

public function add()
{
  $this->count++;
}

public function subtract()
{
  $this->count--;
}

请注意，代码编辑器在第一行上标记了一个错误。它不知道此代码将嵌入到类中。

创建一个页面，在标记标签页中输入

<h3>Example</h3>
{% livewire "counter" with {'count': 2 } %}

并在该页面或其布局中添加 {{ livewireStyles() }} 和 {{ livewireScripts() }}

插件组件示例

创建一个插件，并在该插件中创建一个名为 “lw” 的组件。在 Plugin.php 文件中包含

<?php namespace YourNamespace\PluginName;

use YourNamespace\PluginName\Components\Lw;
use YourNamespace\PluginName\Components\Lw\Lw as LiveW;

class PluginName extends PluginBase
{
  public function registerComponents()
  {
    return [
      Lw::class => 'lw',
    ];
  }
  
  public function registerLivewireComponents()
  {
    return [
      'lw' => ['LivewireClass' => LiveW::class, 'ViewName' => 'default', 'ViewPath' => $this->getPluginPath() . '/components/lw'],
    ];
  }

  // other plugin code
}

在 components 目录中创建一个名为 Lw.php 的文件

<?php namespace YourNamespace\PluginName\Components;

use Cms\Classes\ComponentBase;

class Lw extends ComponentBase
{
  use \Verbant\Livewire\Traits\LivewireComponent;
  /**
   * Gets the details for the component
   */
  public function componentDetails()
  {
    return [
      'name'        => 'lw Component',
      'description' => 'No description provided yet...'
    ];
  }

  /**
   * Returns the properties provided by the component
   */
  public function defineProperties()
  {
    return [];
  }
}

LivewireComponent trait 添加了一个 onRender() 函数，该函数负责将标记作为 Liveewire 标记进行渲染。

在 components/lw 目录中创建 2 个文件：default.twig，内容如下

<div class="input-group py-3 w-25">
    <button wire:click="add" class="btn btn-outline-secondary">
        Add
    </button>
    <div class="form-control">
      {{ count }}
    </div>
    <button wire:click="subtract" class="btn btn-outline-secondary">
        Subtract
    </button>
</div>

和 Lw.php，内容如下

public $count = 1;

public function add()
{
  $this->count++;
}

public function subtract()
{
  $this->count--;
}

现在您可以将此组件添加到 CMS 页面中，方法是从侧边栏拖拽它。请注意，您可以将变量传递给组件，这些变量将提供给 Livewire 组件，如下所示

{% component 'lw' count=5 %}

后端示例

创建一个插件，并在该插件中创建一个名为 “lwc” 的控制器。在 Plugin.php 文件中包含

<?php namespace YourNamespace\PluginName;

use System\Classes\PluginBase;
use YourNamespace\PluginName\Controllers\Lwc\Lwc as LiveWc;

class Plugin extends PluginBase
{
  public function registerLivewireComponents()
  {
    return [
      'lwc' => ['LivewireClass' => LiveWc::class, 'ViewName' => 'default', 'ViewPath' => $this->getPluginPath() . '/controllers/lwc'],
    ];
  }

  // other plugin code
}

在 controllers 目录中创建一个名为 Lwc.php 的文件

<?php namespace YourNamespace\PluginName\Controllers;

use BackendMenu;
use Backend\Classes\Controller;

/**
 * Lw Controller Backend Controller
 */
class Lwc extends Controller
{
  use \Verbant\Livewire\Traits\LivewireController;
  /**
     * @var array Behaviors that are implemented by this controller.
     */
    // public $implement = [
    //     LivewireController::class
    // ];

    public function __construct()
    {
        parent::__construct();
        // possible setContext() and other code
    }
    
    public function index()
    {
    }
}

LivewireController trait 提供了 renderLivewire 函数。

在 controllers/lwc 目录中创建 2 个文件：lwc.twig，内容如下

<div class="input-group py-3 w-25">
    <button wire:click="add" class="btn btn-outline-secondary">
        Add
    </button>
    <div class="form-control">
      {{ count }}
    </div>
    <button wire:click="subtract" class="btn btn-outline-secondary">
        Subtract
    </button>
</div>

和 Lwc.php，内容如下

public $count = 1;

public function add()
{
  $this->count++;
}

public function subtract()
{
  $this->count--;
}

现在您可以通过调用将此组件添加到后端视图中

$this->renderLivewire("lwc", [optional value for the component]);

请注意，对于后端，您不需要添加 { livewireStyles() }} 和 {{ livewireScripts() }} 指令。

许可证

MIT 许可证 (MIT)。请参阅许可证文件了解更多信息。

verbant / wn-livewire-plugin

维护者

详细信息