README

此包允许您在 Laravel 应用程序中注册自定义 "标签助手"。这些助手可以修改 HTML 代码。

它是 beyondcode/laravel-tag-helper 的分支

这个包与原始包的区别是什么？

此包专注于元素属性，而原始包则提议实现自定义元素。此包还具有更好的测试覆盖率和更健壮的代码库。

要使用自定义元素，请尝试创建 Blade 组件。

为什么我应该使用这个包？

为了创建常见的 HTML 模式的快捷方式，并减少 Blade 模板中双大括号的使用。

内置助手

CSRF 令牌

而不是写这个

<form>
    <input type="hidden" name="_token" value="csrf-token">    
</form>

你可以写这个

<form csrf>
</form> 

表单方法

而不是写这个

<form method="post">
    <input type="hidden" name="_method" value="DELETE">
</form>

你可以写这个

<form method="delete">
</form>

链接

而不是写这个

<a href="{{ route('home') }}">Home</a>

你可以写这个

<a route="home">Home</a>

资源

而不是写这个

<link href="{{ asset('asset.css') }}" .../>
<style src="{{ asset('asset.js') }}" .../>
<script src="{{ asset('asset.js') }}" .../>

你可以写这个

<link asset="asset.css" .../>
<style asset="asset.js" .../>
<script asset="asset.js" .../>

条件属性

而不是写这个

@if($condition)
    <div class="bg-red-500"></div>
@endif

@isset($condition)
    <div class="bg-red-500"></div>
@endisset

@empty($condition)
    <div class="bg-red-500"></div>
@endempty

@unless($condition)
    <div class="bg-red-500"></div>
@endunless

你可以写这个

<div class="bg-red-500" if="$condition"></div>

<div class="bg-red-500" isset="$condition"></div>

<div class="bg-red-500" empty="$condition"></div>

<div class="bg-red-500" unless="$condition"></div>

注意：不支持 else 和 elseif。

访客和认证

而不是写这个

@auth("web")
    <div class="bg-red-500"></div>
@endauth

@auth($what)
<div class="bg-red-500"></div>
@endauth

@guest("web")
    <div class="bg-red-500"></div>
@endguest

@guest($what)
<div class="bg-red-500"></div>
@endguest

你可以写这个

<div class="bg-red-500" auth="web"></div>

<div class="bg-red-500" :auth="$what"></div>

<div class="bg-red-500" guest="web"></div>

<div class="bg-red-500" :guest="$what"></div>

安装

您可以通过 composer 安装此包

composer require schivei/laravel-tag-helper

用法

您可以通过创建一个新类并扩展 Schivei\TagHelper\Helper 类来创建自己的 Tag Helper。在此类中，您可以定义您的助手应该在哪些 HTML 元素和属性上触发

<?php

namespace Schivei\TagHelper\Helpers;

use Schivei\TagHelper\Helper;
use Schivei\TagHelper\Html\HtmlElement;

class CustomTagHelper extends Helper
{
    protected $targetAttribute = 'custom';

    protected $targetElements = ['div'];

    protected function _process(HtmlElement $element)
    {
        // Manipulate the element
    }
}

要使用和应用此标签助手，您需要注册它。通常，您会在 AppServiceProvider boot() 方法或您自己的服务提供程序中这样做。

$this->app['tag-helper']->helper(CustomTagHelper::class);

请注意，$autoRemoveAttribute 属性默认设置为 true。如果您不希望在处理后删除属性，可以将它设置为 false。

由于您只注册了自定义标签助手的类名，您可以在自定义助手类内部使用依赖注入。

将您的助手绑定到 HTML 元素和属性

在您的自定义标签助手类中，您可以使用 $targetAttribute 和 $targetElements 属性来指定您想要绑定此助手到的 HTML 元素（如 div、form、a 等）和属性（如 <div custom="value />、<form method="post"> 等）。

如果您没有提供自己的 targetElements，此包将针对具有特定属性的 所有 元素，如下所示

class CustomTagHelper extends Helper
{
    protected $targetAttribute = 'my-attribute';
    
    // ...
    
}

此标签助手将为具有 my-attribute 属性的每个 HTML 元素调用。

操作 DOM 元素

一旦您的标签助手成功匹配一个或多个 HTML 元素，您的标签助手的 process 方法将被调用。

在此方法中，您可以操作 HTML 元素。

可用功能

预加/后加外 HTML

您可以在当前元素之前或之后添加 HTML。

<?php

namespace Schivei\TagHelper\Helpers;

use Schivei\TagHelper\Helper;
use Schivei\TagHelper\Html\HtmlElement;

class CustomLink extends Helper
{
    protected $targetElement = 'my-custom-link';

    protected function _process(HtmlElement $element)
    {
        $element->prependOuterHtml('<div class="custom-link">');
        
        $element->appendOuterHtml('</div>');
    }
}

预加/后加/替换内 HTML

您可以在当前元素内部添加 HTML，前提是元素不是自闭合的。

<?php

namespace Schivei\TagHelper\Helpers;

use Schivei\TagHelper\Helper;
use Schivei\TagHelper\Html\HtmlElement;

class CustomLink extends Helper
{
    protected $targetElement = 'my-custom-link';

    protected function _process(HtmlElement $element)
    {
        $element->prependInnerHtml('<span class="custom-link">');
        
        $element->appendInnerHtml('</span>');
        
        $element->replaceInnerHtml('<span class="custom-link">Hello</span>');
    }
}

操作属性

您还可以添加、编辑或删除 HTML 元素的属性。

在此示例中，我们将我们的助手绑定到所有具有自定义 route 属性的链接标签。然后我们更新链接的 href 属性，删除 route 属性并添加一个新的 title 属性。

<?php

namespace Schivei\TagHelper\Helpers;

use Schivei\TagHelper\Helper;
use Schivei\TagHelper\Html\HtmlElement;

class CustomLink extends Helper
{
    protected $targetAttribute = 'route';
    
    protected $targetElement = 'a';

    protected function _process(HtmlElement $element)
    {
        $element->setAttribute('href', route($element->getAttribute('route')));
        
        $element->setAttribute('title', 'This is a link.');
    }
}

向您的标签助手传递变量

您可以将属性值传递给您的标签助手，就像通常将属性传递给 HTML 元素一样。由于您的标签助手修改的结果被缓存，您应该始终在修改后的属性值中返回有效的 Blade 模板输出。

您无法直接访问标签助手内部的变量内容，只能获取属性字符串表示。

例如，要获取method属性的值

<form method="post"></form>

您可以使用助手内的getAttribute方法来访问这些数据

<?php

namespace Schivei\TagHelper\Helpers;

use Schivei\TagHelper\Helper;
use Schivei\TagHelper\Html\HtmlElement;

class CustomForm extends Helper
{
    protected $targetElement = 'form';

    protected function _process(HtmlElement $element)
    {
        $formMethod = $element->getAttribute('method');
    }
}

如果您想编写Blade输出，有时需要知道用户传递的是变量或函数调用，还是字符串值。为了区分，用户可以通过在属性前加冒号来传递变量数据。

如果您想将此属性输出到Blade模板中，可以使用getAttributeForBlade方法，它将返回属性的转义字符串表示 - 或者如果它前面加了冒号，则返回未转义的表示。

例如

<a :route="home">Home</a>

<?php

namespace Schivei\TagHelper\Helpers;

use Schivei\TagHelper\Helper;
use Schivei\TagHelper\Html\HtmlElement;

class CustomForm extends Helper
{
    protected $targetElement = 'a';

    protected $targetAttribute = 'route';

    protected function _process(HtmlElement $element)
    {
        $element->setAttribute('href', "{{ route(" . $element->getAttributeForBlade('route') . ") }}");
        
        $element->removeAttribute('route');
    }
}

这将输出

<a href="{{ route('home') }}">Home</a>

但如果是传递这样的动态参数

<a :route="$routeVariable">Home</a>

这将输出

<a href="{{ route($routeVariable) }}">Home</a>

这样您就不必手动处理转义和检测动态变量了。

测试

composer test

更新日志

有关最近更改的更多信息，请参阅发布记录。

贡献

有关详细信息，请参阅贡献指南。

安全

如果您发现任何安全问题，请通过电子邮件costa@elton.schivei.nom.br联系，而不是使用问题跟踪器。

鸣谢

• Elton Schivei Costa
• 所有贡献者

许可协议

MIT许可协议（MIT）。有关更多信息，请参阅许可文件。