vant-dynamic-addremove-button-component-loading-properties - keo nha cái

Ví dụ, với thành phần button trong thư viện so keo Vant, chúng ta có một thuộc tính tên là loading.

1<van-button loading type="danger" loading-text="Đang tải..." />

• Khi thuộc tính loading được thiết lập, nút bấm sẽ hiển thị hiệu ứng chuyển động để biểu thị trạng thái đang xử lý.
• Nếu không có thuộc tính loading, nút bấm sẽ xuất hiện như một nút thông thường.

Trong nhiều trường hợp thực tế, đặc biệt khi tương tác với API từ phía máy chủ, người dùng thường muốn thêm thuộc tính loading vào thành phần nút bấm khi bắt đầu gọi API và xóa bỏ thuộc tính này khi quá trình gọi API đã hoàn tất. Điều này giúp cải thiện trải nghiệm người dùng bằng cách thông báo rằng hệ thống đang thực hiện một thao tác nào đó.

Một cách đơn giản để thực hiện điều này là sử dụng một biến trạng thái để kiểm soát giá trị của thuộc tính loading:

1<van-button :loading="isHandling ? true : false" type="danger" loading-text="Đang tải..." />

Trong đoạn mã trên:

• isHandling là một biến boolean mà bạn có thể đặt thành true khi bắt đầu gọi API và đặt về false khi API trả về kết quả hoặc xảy ra lỗi.
• Thuộc tính :loading sẽ phản ánh giá trị của biến này, nhờ vậy mà trạng thái loading của nút bấm có thể được cập nhật một cách tự động.

Thực tế cho thấy rằng thuộc tính loading chấp nhận hai giá trị: true và false. Điều này rất hữu ích khi bạn muốn bật/tắt hiệu ứng loading dựa trên các điều kiện cụ thể.