filepond 上传达到 100% 后模态自动关闭

Question

我正在创建一个社交网络，其中有 post 的模式，然后当我将图像上传到 filepond 时，模式会自动关闭，但图像仍然存在。

我想在不自动关闭模式的情况下上传图片。

这是问题的视频 link：https://vimeo.com/653544395

这是锉刀：

   <div x-data 
 
    x-init="
    FilePond.registerPlugin(FilePondPluginImagePreview);
    
    FilePond.setOptions({
        allowMultiple: {{ isset($attributes['multiple']) ? 'true' : 'false' }},
       server: {
           process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
               @this.upload('{{ $attributes['wire:model'] }}', file, load, error, progress)
           },
           revert: (filename, load, error) => {
               @this.removeUpload('{{ $attributes['wire:model'] }}', filename, load)
           },
       },
    });
               FilePond.create($refs.input);"
                wire:ignore>
       <input type="file" x-ref="input" />
      
    </div>

这是模态按钮：

<button class="bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded text-white m-5 show-modal">show modal</button>

这是post表格

 <div class="modal h-screen w-full fixed left-0 top-0 flex justify-center items-center bg-black bg-opacity-50 hidden">
        <!-- modal -->
        <div class="bg-white rounded shadow-lg w-10/12 md:w-1/3">
          <!-- modal header -->
          <div class="border-b px-4 py-2 flex justify-between items-center">
            <h3 class="font-semibold text-lg">Create Post</h3>
            <button class="text-black close-modal">&cross;</button>
          </div>
          <!-- modal body -->
          <div class="p-3">
            <form  wire:submit.prevent="storePost">
    
              
            
                <div class="w-full h-auto py-2 px-4">
                    <label for="body" class="sr-only">Post Body</label>
                    <textarea name="body" id="body" class="border border-green-800 resize-none bg-transparent border-none outline-none w-full text-black 
                    {{-- text-clr-whitesmoke --}}
                     text-base pb-10" rows="3" placeholder="What's on your mind?" wire:model.defer="body" @error('body')
                    border-pink-500
                @enderror></textarea>
    
    
             
                    <div>
                        
                        <x-input.filepond wire:model="image_paths" multiple/>
                        @error('image_paths') <span class="error">{{ $message }}</span> @enderror
                    </div>
              
               
              
                @error('body')
                           <span class="text-red-500 font-semibold text-sm">{{ $message }}</span> 
                        @enderror
                </div>
    
               
                <!--post button-->
                <div class="px-4">
                    <button type="submit" class="hover:bg-clr-dark-gold w-full py-1 text-center text-base text-clr-black bg-clr-gold rounded-md md:text-lg"> Post </button>
                </div>
            </form>
          </div>
        
        </div>

模态脚本如下：

<script>
        const modal = document.querySelector('.modal');
      
        const showModal = document.querySelector('.show-modal');
        const closeModal = document.querySelectorAll('.close-modal');
      
        showModal.addEventListener('click', function (){
          modal.classList.remove('hidden')
        });
      
        closeModal.forEach(close => {
          close.addEventListener('click', function (){
            modal.classList.add('hidden')
          });
        });
      </script>

Answer 1

根据我的评论

模态没有 wire:ignore 当 Livewire 刷新它的组件时，结果将重置为 hidden。

filepond 上传达到 100% 后模态自动关闭

Modal closes automatically after filepond uploads reaches 100%

laravel

filepond

laravel-livewire