使用Laravel和Livewire制作一个计算器/键盘,我可以点击一个数字按钮,它就会显示在显示屏上。问题是有一点滞后,我想知道是否有更好的方法来减少滞后。
我在Livewire“控制器”中设置了一个名为append的方法,该方法将选定的数字作为值传递到名为display的属性。
在Livewire视图中,我将append方法连接到按钮,例如,0按钮将是wire:单击="append('0')"
Livewire“控制器”测试。php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Test extends Component
{
public $display = "";
public function append($foo){
if(strlen($this->display) < 4){
return $this->display = $this->display.$foo;
}
}
public function clear(){
$this->display = "";
}
public function render()
{
return view('livewire.test');
}
}
Livewire“查看”测试。刀身php
<div>
<div class="h-16 w-full border border-black rounded-sm" >{{$display}} </div>
<div class="w-8/12 sm:w-full grid grid-cols-3 gap-x-8 gap-y-8">
<div> <button wire:click="clear()" class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded-full h-16 w-16 flex items-center justify-center"> AC</button></div>
<div> <button wire:click="append('0')" class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded-full h-16 w-16 flex items-center justify-center"> 0</button></div>
<div> <button class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded-full h-16 w-16 flex items-center justify-center"> S</button></div>
<div><button wire:click="append('1')" class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded-full h-16 w-16 flex items-center justify-center"> 1</button></div>
<div><button wire:click="append('2')" class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded-full h-16 w-16 flex items-center justify-center">2</button></div>
<div> <button wire:click="append('3')" class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded-full h-16 w-16 flex items-center justify-center"> 3</button></div>
<div> <button wire:click="append('4')" class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded-full h-16 w-16 flex items-center justify-center"> 4</button></div>
<div> <button wire:click="append('5')" class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded-full h-16 w-16 flex items-center justify-center"> 5</button></div>
<div> <button wire:click="append('6')" class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded-full h-16 w-16 flex items-center justify-center"> 6</button></div>
<div> <button wire:click="append('7')" class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded-full h-16 w-16 flex items-center justify-center"> 7</button></div>
<div> <button wire:click="append('8')" class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded-full h-16 w-16 flex items-center justify-center"> 8</button></div>
<div> <button wire:click="append('9')" class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded-full h-16 w-16 flex items-center justify-center"> 9</button></div>
</div>
</div>
我怎样才能使输入显示更即时,而不会有这种轻微的滞后?
我认为我不正确地使用了Livewire,应该使用Javascript,在这种情况下是阿尔卑斯js。我只是花了一些时间才意识到我正在使用TALL堆栈。