编程

Laravel 自定义 Select 组件

578 2023-02-13 08:12:19

这是一篇关于为Laravel Livewire应用程序创建自定义 Select 组件的文章。

当涉及到表单元素时,我们可能会立即寻求开源或付费库。预先构建的组件加快了开发,使用经过良好测试的、健壮的库可以减轻我们的压力。

但当我们需要一些定制的东西时呢?定制第三方包通常比自己制作组件更困难。此外,学习如何制作可重用组件可以提高我们对Livewire的总体理解。

今天,我们将使用Livewire和Tailwind制作一个自定义选择组件。然后,我们将进一步考虑使用Alpine.js访问它的方法。我们将完全自定义它,而不使用HTML<select>标记,这在外观和用户体验方面给了我们很大的自由。

我们开始吧

为了简单起见,我们假设您已经创建了一个新的Laravel项目,使用composer安装了Livewire,并使用npm安装了Tailwind。

使用php-artisan make:Livewire select生成Livewire组件。

它将创建两个文件:

  • 组件类: app/Http/Livewire/Select.php
  • 组件视图: resources/views/livewire/select.blade.php

然后,编辑welcome.blade.php文件并引入select组件。

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Livewire Select</title>

    <link href="{{ mix('/css/app.css') }}" rel="stylesheet">

    @livewireStyles
  </head>
  <body class="flex items-center justify-center min-h-screen">

    <div class="w-56">
      <livewire:select/>
    </div>

    @livewireScripts
  </body>
</html>

制作布局

转到select.blade.php文件。该组件有3个部分,即所选项目的标签、所选项目/占位符和带有所有可选选项的绝对定位列表。

<div>
  <label>
  Label
  </label>
  <div class="relative">
    <button>
    Selected item
    </button>
    <ul class="absolute z-10">
      <li>
        Option 1
      </li>
      <li>
        Option 2
      </li>
    </ul>
  </div>
</div>

我们可以通过Tailwind 类。

<div>
  <label class="text-gray-500">
  Label
  </label>
  <div class="relative">
    <button class="w-full flex items-center h-12 bg-white border rounded-lg px-2">
    Selected item
    </button>
    <ul class="bg-white absolute mt-1 z-10 border rounded-lg w-full">
      <li class="px-3 py-2">
        Option 1
      </li>
      <li class="px-3 py-2">
        Option 2
      </li>
    </ul>
  </div>
</div>

修饰好后,它看起来像这样:

选项渲染和切换

现在让我们实现渲染和选项的打开/关闭。

在Select.php文件中创建一些属性和一个toggle()函数

class Select2 extends component
{
  public $items;

  public $selected = null;

  public $label;

  public $open = false;

  public function toggle()
  {
      $this->open = !$this->open;
  }

...

}

为了使组件可重用,我们从外部传递这些,当前在welcome.blade.php中

<livewire:select
  :selected="1"
  :items="['Apple','Banana','Strawberry']"
  label="Favorite fruit"
 />

替换select.blade.php中的一些部分,以从给定的道具动态渲染,并在<button>中添加一个 click监听器,以添加打开/关闭功能。

<div>
  <label class="text-gray-500">
    {{ $label }}
  </label>
  <div class="relative">
    <button
      wire:click="toggle"
      class="w-full flex items-center h-12 bg-white border rounded-lg px-2"
      >
    @if ($selected !== null)
      {{ $items[$selected] }}
    @else
      Choose...
    @endif
    </button>
    @if ($open)
      <ul class="bg-white absolute mt-1 z-10 border rounded-lg w-full">
        @foreach($items as $item)
          <li class="px-3 py-2 cursor-pointer">
            {{ $item }}
          </li>
        @endforeach
      </ul>
    @endif
  </div>
</div>

通过这些编辑,我们的项目被渲染,我们可以打开和关闭选项列表。

Making the Selection

让我们在select.php类中创建一个select($index)函数。这会将选定项设置为给定索引,如果给定索引是当前选定项,则还会对取消选择进行处理。

public function select($index) {
  $this->selected = $this->selected !== $index ? $index : null;
  $this->open = false;
}

将click事件添加到<li>中,并添加一些条件类以突出显示所选选项。我们使用@class blade指令和$loop变量,该变量由@foreachloop提供

<li wire:click="select({{ $loop->index }})"
  @class([
    'px-3 py-2 cursor-pointer',
    'bg-blue-500 text-white' => $selected === $loop->index,
    'hover:bg-blue-400 hover:text-white',
  ])
>
  {{ $item }}
</li>

现在我们有了一个工作选择组件!! 🚀

外观美化

在深入Alpine.js部分之前,让我们做一些UI改进。我们需要一个打开/关闭指示器,在当前选中的项目上包含一个复选图标将很酷。为了简单起见,我们将使用Heroicon 并复制粘贴SVG。

您可以在此处找到select.blade.php的所有的标记:

<div>
    <label class="text-gray-500">
        {{ $label }}
    </label>
    <div class="relative">
        <button
            wire:click="toggle"
            class="w-full flex items-center justify-between h-12 bg-white border rounded-lg px-2"
        >
            @if ($selected !== null)
                {{ $items[$selected] }}
            @else
                Choose...
            @endif

            <div class="text-gray-400">
                @if ($open)
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd"
                          d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z"
                          clip-rule="evenodd"/>
                </svg>
                @else
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd"
                          d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                          clip-rule="evenodd"/>
                </svg>
                @endif
            </div>
        </button>
        @if ($open)
            <ul class="bg-white absolute mt-1 z-10 border rounded-lg w-full">
                @foreach($items as $item)
                    <li wire:click="select({{ $loop->index }})"
                        @class([
                            'px-3 py-2 cursor-pointer flex items-center justify-between',
                            'bg-blue-500 text-white' => $selected === $loop->index,
                            'hover:bg-blue-400 hover:text-white',
                        ])
                    >
                        {{ $item }}

                        @if ($selected === $loop->index)
                        <div class="text-white">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20"
                                 fill="currentColor">
                                <path fill-rule="evenodd"
                                      d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                      clip-rule="evenodd"/>
                            </svg>
                        </div>
                        @endif
                    </li>
                @endforeach
            </ul>
        @endif
    </div>
</div>

使用Alpine.js使其可访问

无障碍是网络开发的一个重要组成部分,不仅仅是当我们考虑残疾人时,而且让事物无障碍为每个人提供了更好的用户体验。

我们的要求:

  • 按TAB键,我们可以获得组件焦点
  • 按空格键打开/关闭组件
  • 按向上和向下箭头在项目之间导航
  • 按ENTER键选择当前高亮显示的元素

以上所有这些都可以通过Livewire实现,但它会向后端发出大量请求。由于这些东西只是UI状态,所以使用Alpine.js(一种流行的轻量级Javascript框架)在浏览器中实现它们是有意义的。

首先,我们需要在welcome.blade.php中引入Alpine的JS

<head>
...
  <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
...
</head>

然后,在父级的 div 中添加一个 x-data 属性

<div x-data="{}">
...
</div>

要在鼠标未悬停的情况下高亮显示项目,我们必须跟踪当前高亮显示的元素。此外,我们必须计算下一个和上一个项目,为此,我们需要从PHP传递项目的计数。

<div x-data="{
  highlighted: 0,
  count: {{ count($items) }},
}">

我们还需要三个函数next、previous和select。我们将在next/previous计算中使用神奇的模运算符,它将在除法后返回余数。例如:3%2=1,8%3=2

要选择当前突出显示的项目,我们将使用此选项$wire变量的call()方法。

<div x-data="{
  highlighted: 0,
  count: {{ count($items) }},
  next() {
    this.highlighted = (this.highlighted + 1) % this.count;
  },
  previous() {
    this.highlighted = (this.highlighted + this.count - 1) % this.count;
  },
  select() {
    this.$wire.call('select', this.highlighted)
  }
}">

现在我们已经拥有了所有需要的数据和函数,让我们将它们连接到布局中。

将Alpine.js事件监听器添加到<button>

<button
  wire:click="toggle"
  class="w-full flex items-center justify-between h-12 bg-white border rounded-lg px-2"
  @keydown.arrow-down="next()"
  @keydown.arrow-up="previous()"
  @keydown.enter.prevent="select()"
>

现在,为了突出显示正确的项,我们使用当前的$index向<li>添加一个x-data,如果$index与高亮显示的变量匹配,则使用Alpine添加一些类。

<li wire:click="select({{ $loop->index }})"
  x-data="{ index: {{ $loop->index }} }"
  class="px-3 py-2 cursor-pointer flex items-center justify-between"
  :class="{'bg-blue-400 text-white': index === highlighted}"
  @mouseover="highlighted = index"
>
  ...
</li>

最后一步

我们快完成了,只剩下几个小问题了。

当我们第一次打开这个Select组件时,它应该突出显示当前选定的项目。让我们使用x-init属性将此信息提供给Alpine。

<div x-data="{...}"
  x-init="highlighted =  {{ $selected ?: 0 }}"
>

我们可以通过向Alpine添加 close() 函数来处理“click outside”,并向父div添加@click.outside listener,以在用户单击其他位置时关闭弹出窗口。

<div x-data="{
  ...
  close() {
    if (this.$wire.open) {
     this.$wire.open = false;
    }
  }
}"
...
@click.outside="close()"
>

在 select 组件未打开并且我们按下 ENTER 键,它将取消选择当前项目,让我们在select.php中解决这个问题

public function select($index) {
  if (!$this->open) {
    return;
  }

  $this->selected = $this->selected !== $index ? $index : null;
  $this->open = false;
}

当高亮显示的项目和选中的项目不同时,我们需要将复选图标的颜色更改为蓝色;否则在白色背景上看不到。让我们用一些动态类来解决这个问题。

@if ($selected === $loop->index)
  <div :class="index === highlighted ? 'text-white' : 'text-blue-500'">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
    </svg>
  </div>
@endif

就这样,我们完成了! 🚀 👏

正如您所看到的,通过将多个<livewire:select/>组件放入我们的视图中,每个组件都完成了它的工作。

结语

有时,当使用第三方组件包时,我们不知道到底发生了多少事情。当我们自己做的时候,除了学习所涉及的内容之外,我们也意识到这是我们自己可以做的事情。所以当我们需要一些定制的东西时,我们不会害怕。

另一个好处是:如果您希望Livewire组件是可重用的,那么应该将外部的每个依赖项传递给它们,而不是使用全局事件和侦听器。

我们可以使用Livewire做很多事情,但我们应该注意使用Javascript更有意义的情况。Alpine.js和Livewire一起工作很好,当我们将它们结合起来时,我们可以为我们的客户和用户解决很多问题。