laravel 开发youtube项目3-创建上传视频按钮

创建上传视频控制器

php artisan livewire:make UploadVideo

UploadVideo控制器

App\Livewire\UploadVideo.php

<?php

namespace App\Livewire;

use Livewire\Attributes\On;
use Livewire\Component;

class UploadVideo extends Component
{
    public bool $modal = false;

    #[On('toggleModal')]       // Livewire 组件中监听事件
    public function toggleModal()
    {
        $this->modal = !$this->modal;
    }

    public function render()
    {
        return view('livewire.upload-video');
    }
}

前端模版

resources\views\navigation-menu.blade.php

@auth
    <div class="hidden sm:flex sm:items-center sm:ms-6">
        @auth
            <x-button label="上传视频" @click="$wire.dispatch('toggleModal')" class="btn-primary"/>
        @endauth

        <!-- Settings Dropdown -->
        <div class="ms-3 relative">
        .....
        .....
        .....
        .....
        .....
        
        
     

    </aside>
    <livewire:upload-video wire:key="upload-video"/>
</div>
     

效果图：

resources\views\livewire\upload-video.blade.php 上传视频模态框

<div>
    <x-modal wire:model="modal" title="上传视频">
        <x-slot:actions>
            <x-button label="Cancel" @click="$wire.myModal = false" />
            <x-button label="Confirm" class="btn-primary" />
        </x-slot:actions>
    </x-modal>
</div>

效果图：