时间戳

首页 > 解决方案 > Laravel Livewire 计算器/键盘，提高输入显示速度

php - Laravel Livewire 计算器/键盘，提高输入显示速度

问题描述

使用 Laravel 和 Livewire 制作计算器/键盘，然后我可以单击数字按钮并显示在显示屏中。问题是有一点滞后，我想知道是否有更好的方法来减少滞后。

我已经设置了 Livewire“控制器”有一个名为 append 的方法，它将作为值传递的选定数字附加到一个名为 display 的属性。

在 Livewire“视图”中，我将 append 方法连接到按钮，例如，0 按钮将是 wire:click="append('0')"

Livewire“控制器”test.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“查看”test.blade.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>

我怎样才能使输入显示更即时，而没有这种轻微的滞后？

标签： phplaravellaravel-livewire

解决方案

我认为我使用 Livewire 不正确，应该使用 Javascript，在这种情况下是 Alpine js。我花了一些时间才意识到我正在使用 TALL 堆栈。

推荐阅读