活线暂时禁用动作

Question

在其他事情发生的时候，什么是暂时阻止行动的最好方法？

例如一个缓慢的文件上传，阻止操作“存储”被提交。

尝试使用公共财产，但这太慢了。

<form wire:submit.prevent="store" enctype="multipart/form-data">
    <x-forms.filepond wire:model="file_upload" />

    <button wire:click.prevent="store" wire:loading.attr="disabled">
        <x-loader wire:loading wire:target="store" class="full-current mr-2 h-4 w-4" />
        <x-icons.save wire:loading.remove wire:target="store" class="full-current mr-2 h-4 w-4" />
        Save
    </button>
</form>

Answer 1

我会尝试高寒或允许商店提交并检查商店功能上的上传。

Answer 2

这就是我如何用AlpineJS实现的

飞秒分量，

@props(['key'])
<div
        wire:ignore
        x-data
        x-init="
        () => {
            const pond = FilePond.create(document.getElementById('{{ $key }}'));
            pond.setOptions({
                credits: false,
                disabled: {{ $attributes->has('disabled') ? 'true' : 'false' }},
                allowMultiple: {{ $attributes->has('multiple') ? 'true' : 'false' }},
                server: {
                    process:(fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
                        @this.upload('{{ $key }}', file, load, error, progress)
                    },
                    revert: (filename, load) => {
                        @this.removeUpload('{{ $key }}', filename, load)
                    },
                },
                allowImagePreview: {{ $attributes->has('allowFileTypeValidation') ? 'true' : 'false' }},
                imagePreviewMaxHeight: {{ $attributes->has('imagePreviewMaxHeight') ? $attributes->get('imagePreviewMaxHeight') : '256' }},
                allowFileTypeValidation: {{ $attributes->has('allowFileTypeValidation') ? 'true' : 'false' }},
                acceptedFileTypes: {!! $attributes->get('acceptedFileTypes') ?? 'null' !!},
                allowFileSizeValidation: {{ $attributes->has('allowFileSizeValidation') ? 'true' : 'false' }},
                maxFileSize: {!! $attributes->has('maxFileSize') ? "'".$attributes->get('maxFileSize')."'" : 'null' !!},
                onaddfilestart: function(file) { submitButtonDisabled = true },
                onprocessfiles: function() { submitButtonDisabled = false },
                onupdatefiles: function (files) {
                    fileStatus = true;
                    files.forEach(function (file) {
                        if(file.status != 5) fileStatus = false;
                    });
                    if(fileStatus) submitButtonDisabled = false;
                },
            });
            this.addEventListener('reset-pond', e => {
                pond.removeFiles();
            });
        }
    "
>
    <input type="file" id="{{ $key }}"/>
</div>
<x-inputs.error field="{{ $attributes->has('multiple') ? $key . '.*' : $key }}"/>

(从根本上看onaddfilestart、onprocessfiles、onupdatefiles filepond事件)

然后在文件上传组件上

将其添加到根目录div x-data="{ submitButtonDisabled: false}"

• add，将其添加到提交按钮x-bind:disabled="submitButtonDisabled"

中。