Tạo hộp thoại xác nhận với Livewire: Hướng dẫn từng bước

Livewire là một framework full-stack dành cho Laravel giúp đơn giản hóa việc tạo giao diện động mà không cần rời khỏi Laravel.

Khả năng tạo hộp thoại xác nhận với ít hoặc không cần mã và không có JavaScript là một trong những tính năng của Livewire.

Tôi sẽ hướng dẫn bạn quy trình tạo hộp thoại xác nhận bằng Livewire bằng một vài bước đơn giản trong bài đăng blog này bằng cách sử dụng lệnh HTML 'wire:confirm' mới giúp việc thêm hộp thoại xác nhận trước khi thực hiện một quan trọng hoặc hành động nguy hiểm.

Cài đặt Livewire

Để sử dụng Livewire, bạn cần cài đặt nó trong dự án Laravel của mình. Bạn có thể thực hiện việc này bằng cách chạy lệnh sau trong terminal của mình:

composer require livewire/livewire

Điều này sẽ cài đặt Livewire như một phần phụ thuộc và xuất bản các nội dung cũng như tệp cấu hình của nó.

Bạn cũng có thể tùy ý chạy lệnh sau" php artisan livewire:publish --config "để xuất bản tệp cấu hình Livewire, cho phép bạn tùy chỉnh một số cài đặt.

Việc sử dụng wire:confirm' mới giúp việc thêm hộp thoại xác nhận vào ứng dụng của bạn trở nên cực kỳ dễ dàng.

Bạn có thể sử dụng wire:confirm để xác nhận đơn giản có nút "Hủy" và "OK", cùng với một sự kiện như wire:click:

<div>
    <h2>Danger zone</h2>
    <button
        type="button"
        wire:click="delete"
        wire:confirm="Are you sure you want to delete this project?"
    >
        Delete this project
    </button>
</div>

Livewire sẽ khởi chạy cửa sổ bật lên xác nhận trình duyệt gốc khi bạn nhấp vào nút.

Mọi thứ trở nên thú vị hơn một chút nếu bạn yêu cầu người dùng nhập nội dung nào đó để xác minh rằng họ muốn cố tình làm điều gì đó thảm khốc.

<div>
    <h2>Danger zone</h2>
    {{-- ... --}}
    <button
        type="button"
        wire:click="delete"
        wire:confirm.prompt="Are you sure?\n\nType DELETE to confirm|DELETE"
    >
        Delete this project
    </button>
</div>

'|DELETE' cho Livewire biết lời nhắc dự kiến ​​sẽ khớp.

Khi nhấp vào nút, một phương thức ' nhắc() ' sẽ xuất hiện và yêu cầu người dùng viết "XÓA". Nếu đầu vào của người dùng tương ứng, phương thức ' delete() ' của thành phần Livewire sẽ được gọi.

Từ hoặc cụm từ xác nhận có thể được thay đổi để phản ánh giá trị động trên thành phần. Ví dụ: bạn có thể yêu cầu người dùng cung cấp tên dự án để xác minh:

Tôi lập luận rằng việc viết hoa mọi thứ sẽ là dễ dàng nhất vì có một lưu ý: việc khớp văn bản có phân biệt chữ hoa chữ thường. Bạn phải sử dụng các thực thể HTML trong thuộc tính ' wire:confirm ' nếu bạn muốn sử dụng dấu ngoặc kép như tôi đang trình bày.

<div>
    <h2>Danger zone</h2>
    {{-- ... --}}
    <button
        type="button"
        wire:click="delete"
        wire:confirm.prompt="Are you sure?\n\nType &quot;{{ str($project_name)->upper() }}&quot; to confirm|{{ str($project_name)->upper() }}"
    >
        Delete this project
    </button>
</div>

Tại sao bạn nên sử dụng Chỉ thị HTML 'wire:confirm' của Livewire?

Nếu bạn đang tìm kiếm một cách đơn giản và hiệu quả để thêm hộp thoại xác nhận trước khi thực hiện một hành động quan trọng hoặc nguy hiểm trên trang web của mình, bạn nên cân nhắc sử dụng lệnh wire:confirm HTML.

Lệnh này là một phần của khung Livewire, là một thư viện giúp dễ dàng xây dựng các ứng dụng web động và tương tác bằng Laravel.

Lệnh wire:confirm cho phép bạn chỉ định một thông báo sẽ được hiển thị trong chế độ trình duyệt gốc khi người dùng nhấp vào một phần tử có hành động Livewire được đính kèm với nó.

Ví dụ: nếu bạn có nút xóa bản ghi khỏi cơ sở dữ liệu, bạn có thể thêm wire:confirm="Bạn có chắc chắn muốn xóa bản ghi này không?" vào thành phần nút và người dùng sẽ thấy hộp thoại yêu cầu họ xác nhận hành động của mình trước khi hành động Livewire được kích hoạt.

Bằng cách này, bạn có thể ngăn chặn các hành động vô tình hoặc độc hại xảy ra, đồng thời cung cấp thêm ngữ cảnh và sự rõ ràng cho người dùng về những gì họ đang làm.

Lệnh wire:confirm có một số ưu điểm so với các phương pháp thêm hộp thoại xác nhận khác, chẳng hạn như sử dụng JavaScript hoặc các thành phần tùy chỉnh.

Đầu tiên, nó sử dụng phương thức ' Window.confirm ' của trình duyệt gốc, đơn giản và nhất quán trên các trình duyệt và nền tảng khác nhau.

Bạn không phải lo lắng về các vấn đề về kiểu dáng, khả năng tương thích hoặc hiệu suất.

Thứ hai, nó rất dễ sử dụng và yêu cầu mã tối thiểu.

Bạn chỉ cần thêm lệnh và thông báo vào phần tử và Livewire sẽ xử lý phần còn lại.

Thứ ba, nó tích hợp hoàn toàn với khung Livewire, nghĩa là bạn có thể sử dụng nó với bất kỳ hành động Livewire nào, chẳng hạn như wire:click , wire:submit hoặc wire:model .

Phần kết luận

Lệnh wire:confirm là một công cụ tuyệt vời để thêm hộp thoại xác nhận vào trang web của bạn. Nó đơn giản, hiệu quả và thuận tiện để sử dụng.

Nó có thể giúp bạn cải thiện trải nghiệm người dùng và tính bảo mật của ứng dụng web của bạn.

Nếu bạn muốn tìm hiểu thêm về wire:confirm chỉ thị và khung Livewire, bạn có thể truy cập tài liệu chính thức hoặc kho lưu trữ GitHub.

Tôi hy vọng ghi chú này đã thuyết phục bạn thử. 😊