php - 这可以在没有 Alpine Js 的情况下转换为 Livewire 组件或简化为 livewire 组件(标签输入)
问题描述
我想为标签输入制作一个 Laravel livewire 组件。我在互联网上找到了一个,但很难与 livewire 组件连接。这是产品属性添加页面。我添加了不同的属性和值。所以我尝试使用像 Shopify 网站这样的标签输入。这段代码可以在没有 alpine js 的情况下转换为 livewire 组件,还是可以简化 alpine js 部分以与 livewire 组件兼容?
<div class="relative" @keydown.enter.prevent="addTag(textInput)">
<input x-model="textInput" x-ref="textInput" @input="search($event.target.value)" class="form-control"
placeholder="Enter some tags">
<div :class="[open ? 'block' : 'hidden']">
<div class="absolute left-0 z-40 w-full mt-2">
<div class="py-1 text-sm bg-white border border-gray-300 rounded shadow-lg">
<a @click.prevent="addTag(textInput)"
class="block px-5 py-1 cursor-pointer hover:bg-indigo-600 hover:text-white">Add
tag "<span class="font-semibold" x-text="textInput"></span>"</a>
</div>
</div>
</div>
<template x-for="(tag, index) in tags">
<div class="inline-flex items-center mt-2 mr-1 text-sm bg-indigo-100 rounded">
<span class="max-w-xs ml-2 mr-1 leading-relaxed truncate" x-text="tag"></span>
<button @click.prevent="removeTag(index)"
class="inline-block w-6 h-8 text-gray-500 align-middle hover:text-gray-600 focus:outline-none">
<svg class="w-6 h-6 mx-auto fill-current" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path fill-rule="evenodd"
d="M15.78 14.36a1 1 0 0 1-1.42 1.42l-2.82-2.83-2.83 2.83a1 1 0 1 1-1.42-1.42l2.83-2.82L7.3 8.7a1 1 0 0 1 1.42-1.42l2.83 2.83 2.82-2.83a1 1 0 0 1 1.42 1.42l-2.83 2.83 2.83 2.82z" />
</svg>
</button>
</div>
</template>
</div>
<script>
function tagSelect() {
return {
open: false,
textInput: '',
tags: [],
init() {
this.tags = JSON.parse(this.$el.parentNode.getAttribute('data-tags'));
},
addTag(tag) {
tag = tag.trim()
if (tag != "" && !this.hasTag(tag)) {
this.tags.push(tag)
}
this.clearSearch()
this.$refs.textInput.focus()
this.fireTagsUpdateEvent()
},
fireTagsUpdateEvent() {
this.$el.dispatchEvent(new CustomEvent('tags-update', {
detail: {
tags: this.tags
},
bubbles: true,
}));
},
hasTag(tag) {
var tag = this.tags.find(e => {
return e.toLowerCase() === tag.toLowerCase()
})
return tag != undefined
},
removeTag(index) {
this.tags.splice(index, 1)
this.fireTagsUpdateEvent()
},
search(q) {
if (q.includes(",")) {
q.split(",").forEach(function(val) {
this.addTag(val)
}, this)
}
this.toggleSearch()
},
clearSearch() {
this.textInput = ''
this.toggleSearch()
},
toggleSearch() {
this.open = this.textInput != ''
}
}
}
</script>
解决方案
我无法完全按照我的意愿转换上面的代码。但是我可以使用 livewire laravel 组件制作一个标签输入系统。我觉得这段代码可能会帮助某人使用 livewire Laravel 进行标签输入。
//Livewire 组件 (app/Http/Livewire/)
public $attributeOne = [];
public $attributeOneTag;
public $attributeOneTags = [];
public $attributeOneTagsMerge = [];
public $attributeOneId;
public function attributeOne()
{
$attributeOneTag = trim(str_replace(' ', '', $this->attributeOneTag));
if (in_array($this->attributeOneTag, $this->attributeOneTags) || $this->attributeOneTag === '') {
$this->attributeOneTag = '';
$this->attributeOneId = 'attributeOneId';
$this->emit('tagfocus');
} else {
array_push($this->attributeOneTags, $attributeOneTag);
$this->attributeOne = array_merge($this->attributeOneTagsMerge, array($this->attributeOneTags));
$this->attributeOneTag = '';
$this->attributeOneId = 'attributeOneId';
$this->emit('tagfocus');
}
}
//livewire视图组件(resources/views/Livewire/)
<x-input.select wire:model='attributeOneTag' wire:keydown.enter='attributeOne' :attribute="$attributeOne" :attributeId="$attributeOneId"/>
//Laravel 组件 (resources/views/components/input/select.blade.php)
@props([
'error' => null,
'attribute' => null,
'attributeId' => null,
])
<input type="text" id="{{ $attributeId }}" class="form-control" {{ $attributes }}>
@isset($attribute)
@foreach ($attribute as $item)
@foreach ($item as $key => $value)
<div class="inline-flex items-center mt-2 mr-1 text-sm bg-indigo-100 rounded">
<span class="max-w-xs ml-2 mr-1 leading-relaxed truncate">{{ $value }}</span>
<button wire:click.prevent='remove({{ $key }})'
class="inline-block w-6 h-8 text-gray-500 align-middle hover:text-gray-600 focus:outline-none">
<svg class="w-6 h-6 mx-auto fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill-rule="evenodd"
d="M15.78 14.36a1 1 0 0 1-1.42 1.42l-2.82-2.83-2.83 2.83a1 1 0 1 1-1.42-1.42l2.83-2.82L7.3 8.7a1 1 0 0 1 1.42-1.42l2.83 2.83 2.82-2.83a1 1 0 0 1 1.42 1.42l-2.83 2.83 2.83 2.82z" />
</svg>
</button>
</div>
@endforeach
@endforeach
@endisset
<script>
document.addEventListener('livewire:load', () => {
window.livewire.on('tagfocus', inputname => {
document.getElementById("{{ $attributeId }}").focus();
})
});
</script>
推荐阅读
- r - 将 csv 写入 s3,具有直接在存储桶内的凭据
- powershell - 如何通过powershell访问windows10中的mdb文件?
- javascript - 本地媒体访问受限,直到用户与 Firefox 中的页面交互
- javascript - Axios 拦截器:阻止对特定页面的访问
- reactjs - 状态数组(不是对象)和扩展运算符
- java - Java ProcessBuilder:如何抑制输出而不是重定向它
- c# - 切断来自服务器的传出 http 调用
- r - 从 URL 下载 csv
- slice - 为什么从较高的负索引切片到较小的负索引会给出空字符串?
- java - 使用自定义类型将 JSON 字符串转换为 Map