带有刀片组件和 alpine.js 的切换按钮

Question

我正在尝试创建自己的切换组件。这个组件的行为应该像普通的<input type="checkbox" >。到目前为止，我已经创建了以下内容：

toggle.blade.php

@props([
    'id' => 1
])

<div class="flex justify-center items-center">
    <div {{ $attributes->whereStartsWith('class')->merge(['class' => 'relative rounded-full transition duration-200 ease-linear' ]) }}
        :class="[ $refs.toggle{{ $id }}.checked ? 'bg-green-400' : 'bg-gray-400' ]">
        <label for="toggle{{ $id }}"
            class="absolute left-0 bg-white border-2 mb-2 w-1/2 h-full rounded-full transition transform duration-100 ease-linear cursor-pointer"
            :class="[ $refs.toggle{{ $id }}.checked ? 'translate-x-full border-green-400' : 'translate-x-0 border-gray-400' ]"></label>
        <input x-ref="toggle{{ $id }}" type="checkbox" id="toggle{{ $id }}" class="appearance-none w-full h-full active:outline-none focus:outline-none"
            {{ $attributes }} x-init="console.log('test')" />
    </div>
</div>

我怎么称呼它：

<div>
  <x-inputs.toggle class="w-8 h-4" value="{{ $permission['id'] }}" 
    id="{{ $permission['id'] }}" x-model="permissions" /> <-- this one
  <input class="form-checkbox" value="{{ $permission['id'] }}" type="checkbox" x-model="permissions">
</div>

我希望能够在我的组件上放置一个 x 模型。这样我就可以从复选框输入中使用正常的双向绑定。

上面的代码可以工作，但是因为 ref（输入）比$refs 调用晚初始化。在切换中导致错误的类，直到按下复选框/切换之一（参考更新），参见图片：

通常，我会给组件一个 x-data 并检查是否切换等。但是我不能使用 x-model，因为该模型不存在于组件的 x-data 属性中。

我还尝试过在类属性中传递x-model 的值，例如：:class="[ {{ $attirubtes->whereStartsWith('x-model')->first() ? ... : ... ]"。但这也不起作用，因为我将一个数组传递给 x-model 复选框，其中 alpine.js 做了一些花哨的事情并正确处理它。

知道如何解决这个问题吗？

提前致谢。

Answer 1

你快到了。没有看到你的 x-data 有点棘手，但使用 refs 你会走很长一段路，而不是使用内置的反应性，这就是你看到延迟更新的原因。

我想你已经说过你的permissions 变量是一个数组。如果是这样，您可以在刀片组件中获取 alpine 变量名称和复选框的值，并使用它们来确定是否应检查切换。

在刀片组件中

<?php
    // Here we get the name of your alpine variable and the
    // value for the toggle
    $alpineVar = $attributes->whereStartsWith('x-model')->first();
    $value = $attributes->whereStartsWith('value')->first();
    
    // Here we build the javascript expression used to check
    // our permissions array for the toggle value
    $expression = "$alpineVar.includes('$value')";
?>

<div class="flex justify-center items-center">
    <div 
    {{ $attributes->whereStartsWith('class')->merge(['class' => 'relative rounded-full transition duration-200 ease-linear' ]) }}
    :class="[
        {{ $expression }} ? 'bg-green-400' : 'bg-gray-400'
    ]">
        <label 
        for="toggle{{ $id }}"
        class="absolute left-0 bg-white border-2 mb-2 w-1/2 h-full rounded-full transition transform duration-100 ease-linear cursor-pointer"
        :class="[
            {{ $expression }} ? 'translate-x-full border-green-400' : 'translate-x-0 border-gray-400'
        ]"></label>
        <input id="toggle{{ $id }}" type="checkbox" class="appearance-none w-full h-full active:outline-none focus:outline-none" {{ $attributes }} />
    </div>
</div>

在这里，我们从 x-model 属性中获取 AlpineJs 实例变量的名称，并使用它来检查数组中的 value，以便我们可以在 div 和 label 元素上的类之间切换。

在页面中

<div 
x-data="{
    permissions: ['view','read','create']
}">
    <x-inputs.toggle class="w-8 h-4" value="view" x-model="permissions" />
</div>

我显然在这里使用了一个示例 x-data 实例，因此请根据您的需要对其进行自定义。在这里，我们传入 view 对象中的 view 值，并与 x-model 绑定以提供我们需要的响应性。

我希望一切都有意义并回答您的问题??