提问者:小点点

Laravel Livewire计算器/键盘,提高输入到显示的速度


使用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>

我怎样才能使输入显示更即时,而不会有这种轻微的滞后?


共1个答案

匿名用户

我认为我不正确地使用了Livewire,应该使用Javascript,在这种情况下是阿尔卑斯js。我只是花了一些时间才意识到我正在使用TALL堆栈。