Giá trị thả xuống được chọn của Laravel Khi chỉnh sửa
tham số cho tuyến đường laravel [có trong hành động biểu mẫu], giúp lưu tùy chọn mà người dùng chọn trong danh sách thả xuống chọn
Tôi nhận ra rằng có thể thực hiện được nếu chúng ta sử dụng lệnh gọi ajax tới cơ sở dữ liệu và hiển thị kết quả theo id đã chọn, đồng thời chúng ta cũng có thể chỉnh sửa xóa sản phẩm bằng cách sử dụng cùng một quy trình gọi id sản phẩm,
Đây là mã của tôi sử dụng JQuery để gửi biểu mẫu khi thay đổi menu. Mục lục. php
Đây là tập tin tuyến đường của tôi. // web. php [tuyến đường]
Route::get['/tours-dropdown/{id}', ['as' => 'bookings.toursDropDown', 'uses' => 'BookingsController@toursDropDownData']];
Đây là tệp chạy truy vấn và trả về tập hợp kết quả cho dạng xem. //Bộ điều khiển sản phẩm. php
«
Trước đó
1
/
1
Tiếp theo
»
ấu trùng 5. 5 Hướng dẫn CRUD, Giới thiệu và Tổng quan về Chương trình nghị sự, Phần đào tạo Laravel – 1 DevopsSchool
«
Trước đó
1
/
1
Tiếp theo
»
Pradeep K
Bài đăng mới nhất của Pradeep K [xem tất cả]
Đây là bài đăng về việc tạo một thành phần chọn tùy chỉnh cho các ứng dụng Laravel Livewire. Nếu bạn có một ứng dụng Laravel mà bạn muốn triển khai gần hơn với người dùng của mình thì hãy bắt đầu ngay bây giờ. Bạn có thể lên và chạy chỉ trong vài phút
Khi nói đến các phần tử biểu mẫu, chúng ta có thể ngay lập tức tìm đến một thư viện mã nguồn mở hoặc trả phí. Các thành phần dựng sẵn giúp tăng tốc độ phát triển và việc sử dụng các thư viện mạnh mẽ, đã được thử nghiệm kỹ càng sẽ giảm bớt rất nhiều áp lực cho chúng tôi
Nhưng còn khi chúng ta cần một cái gì đó tùy chỉnh thì sao? . Ngoài ra, học cách tạo một thành phần có thể tái sử dụng sẽ cải thiện hiểu biết chung của chúng ta về Livewire
Hôm nay, chúng ta sẽ tạo một thành phần chọn tùy chỉnh bằng Livewire và Tailwind. Sau đó, chúng tôi sẽ đi xa hơn và xem xét các cách để làm cho nó có thể truy cập được bằng cách sử dụng Alpine. js. Chúng tôi sẽ xây dựng nó hoàn toàn tùy chỉnh mà không cần sử dụng thẻ HTML
Label
Selected item
Option 1
Option 2
9, điều này mang lại cho chúng tôi rất nhiều sự tự do về giao diện và UXHãy cuộn
Để đơn giản, chúng tôi giả sử bạn đã tạo một dự án Laravel mới, cài đặt Livewire bằng trình soạn thảo và cài đặt Tailwind bằng npm
Tạo thành phần Livewire bằng cách sử dụng
Label
Selected item
Option 1
Option 2
0Nó tạo ra hai tập tin
Sau đó, chỉnh sửa tệp
Label
Selected item
Option 1
Option 2
3 của chúng tôi và bao gồm thành phần đã chọn
Livewire Select
@livewireStyles
@livewireScripts
Tạo bố cục
Chuyển đến tệp
Label
Selected item
Option 1
Option 2
4. Thành phần này có 3 phần, nhãn của phần được chọn, mục/phần giữ chỗ được chọn và một danh sách được định vị tuyệt đối với tất cả các tùy chọn có thể chọn
Label
Selected item
Option 1
Option 2
Chúng tôi có thể làm cho nó nổi bật với một vài lớp Tailwind
Label
Selected item
Option 1
Option 2
Sau khi mặc nó lên, nó trông như thế này
Kết xuất và chuyển đổi mục
Bây giờ, hãy thực hiện kết xuất và mở/đóng các tùy chọn
Tạo một số thuộc tính trong tệp
Label
Selected item
Option 1
Option 2
5 và hàm
Label
Selected item
Option 1
Option 2
6
Label
Selected item
Option 1
Option 2
2Để làm cho thành phần có thể tái sử dụng, chúng tôi chuyển những thứ này từ bên ngoài, hiện tại trong
Label
Selected item
Option 1
Option 2
3
Label
Selected item
Option 1
Option 2
4Thay thế một số phần trong
Label
Selected item
Option 1
Option 2
4 để hiển thị động từ các đạo cụ đã cho, đồng thời thêm trình nghe nhấp chuột vào
Label
Selected item
Option 1
Option 2
9 để thêm chức năng đóng/mở
Label
Selected item
Option 1
Option 2
7Với một vài chỉnh sửa đó, các mục của chúng tôi được hiển thị và chúng tôi có thể mở và đóng danh sách tùy chọn
Thực hiện Lựa chọn
Hãy tạo một hàm
Label
Selected item
Option 1
Option 2
20 trong lớp
Label
Selected item
Option 1
Option 2
5. Điều này đặt mục đã chọn thành chỉ mục đã cho và cũng xử lý bỏ chọn nếu chỉ mục đã cho là mục hiện được chọn
Label
Selected item
Option 1
Option 2
0Thêm sự kiện nhấp chuột vào
Label
Selected item
Option 1
Option 2
22 và thêm một vài lớp điều kiện để làm nổi bật tùy chọn đã chọn. Chúng tôi sử dụng chỉ thị lưỡi
Label
Selected item
Option 1
Option 2
23 và biến
Label
Selected item
Option 1
Option 2
24, được cung cấp bởi vòng lặp
Label
Selected item
Option 1
Option 2
25
Label
Selected item
Option 1
Option 2
5Bây giờ chúng ta có một thành phần chọn đang hoạt động. 🚀
Làm cho nó đẹp hơn
Trước khi chúng tôi đi sâu vào Alpine. js, hãy thực hiện một số cải tiến giao diện người dùng. Vì chúng tôi đang xây dựng tùy chỉnh này, chúng tôi có thể làm cho nó hiển thị theo cách chúng tôi muốn cho ứng dụng của mình. Chúng tôi muốn có một chỉ báo mở/đóng và sẽ rất tuyệt nếu bao gồm biểu tượng kiểm tra trên mục hiện được chọn. Để đơn giản, chúng tôi sẽ sử dụng Heroicons và sao chép-dán SVG-s
Bạn có thể tìm thấy đánh dấu cuối cùng đầy đủ của
Label
Selected item
Option 1
Option 2
4 tại đâyLàm cho nó có thể truy cập được bằng Alpine. js
Khả năng truy cập là một phần quan trọng trong quá trình phát triển web, không chỉ khi chúng ta nghĩ về người khuyết tật mà việc làm cho mọi thứ có thể truy cập mang lại trải nghiệm người dùng tốt hơn cho mọi người
yêu cầu của chúng tôi
- Nhấn
Label
Selected item
Option 1
Option 2
27, chúng tôi có thể tập trung vào thành phần của mình - Nhấn
Label
Selected item
Option 1
Option 2
28 mở/đóng thành phần - Nhấn mũi tên
Label
Selected item
Option 1
Option 2
29 và
Label
Selected item
Option 1
Option 2
40 điều hướng giữa các mục - Nhấn
Label
Selected item
Option 1
Option 2
41 chọn phần tử hiện được đánh dấu
Tất cả những điều trên có thể được thực hiện bởi Livewire, nhưng nó sẽ tạo ra rất nhiều yêu cầu đối với phần phụ trợ. Vì những thứ này chỉ ở trạng thái giao diện người dùng, nên việc triển khai chúng trong trình duyệt bằng Alpine là điều hợp lý. js, một khung Javascript phổ biến và nhẹ
Đầu tiên, chúng ta cần đưa Alpine's JS vào
Label
Selected item
Option 1
Option 2
3 của mình
Label
Selected item
Option 1
Option 2
3Sau đó, thêm một thuộc tính
Label
Selected item
Option 1
Option 2
43 vào cha mẹ của chúng ta
Label
Selected item
Option 1
Option 2
44
Label
Selected item
Option 1
Option 2
6Để đánh dấu một mục ngay cả khi chuột không di chuột, chúng ta phải theo dõi phần tử nào hiện đang được đánh dấu. Ngoài ra, chúng ta phải tính toán mục tiếp theo và mục trước đó, và để làm được điều đó, chúng ta sẽ cần chuyển số lượng mục từ PHP
Label
Selected item
Option 1
Option 2
0Chúng ta cũng cần ba chức năng
Label
Selected item
Option 1
Option 2
45,
Label
Selected item
Option 1
Option 2
46 và
Label
Selected item
Option 1
Option 2
47. Chúng tôi sẽ sử dụng toán tử modulo ma thuật cho phép tính tiếp theo/trước đó, phép tính này sẽ trả về phần còn lại sau phép chia. e. g.
Label
Selected item
Option 1
Option 2
48,
Label
Selected item
Option 1
Option 2
49
Để chọn mục hiện được đánh dấu, chúng tôi sẽ sử dụng phương thức
Label
Selected item
Option 1
Option 2
71 của biến
Label
Selected item
Option 1
Option 2
70
Label
Selected item
Option 1
Option 2
1Bây giờ chúng ta đã có tất cả dữ liệu và chức năng cần thiết, hãy kết nối chúng vào bố cục của chúng ta
Thêm núi cao. js-người nghe sự kiện cho
Label
Selected item
Option 1
Option 2
9 của chúng tôi
Label
Selected item
Option 1
Option 2
2Bây giờ, để làm nổi bật mục thích hợp, chúng tôi thêm một
Label
Selected item
Option 1
Option 2
43 vào
Label
Selected item
Option 1
Option 2
22 của chúng tôi với
Label
Selected item
Option 1
Option 2
75 hiện tại và thêm một số lớp bằng cách sử dụng Alpine nếu
Label
Selected item
Option 1
Option 2
75 khớp với biến
Label
Selected item
Option 1
Option 2
77
Label
Selected item
Option 1
Option 2
3Lần chỉnh sửa cuối cùng
Chúng tôi gần như đã hoàn thành ở đây, chỉ còn một vài trục trặc
Khi chúng tôi mở lựa chọn lần đầu tiên, nó sẽ làm nổi bật mục hiện được chọn. Hãy cung cấp thông tin này cho Alpine bằng thuộc tính
Label
Selected item
Option 1
Option 2
78
Label
Selected item
Option 1
Option 2
4Chúng tôi có thể xử lý "nhấp chuột bên ngoài" bằng cách thêm hàm
Label
Selected item
Option 1
Option 2
79 vào Alpine và trình nghe
Label
Selected item
Option 1
Option 2
00 cho cha mẹ
Label
Selected item
Option 1
Option 2
44 để đóng cửa sổ bật lên khi người dùng nhấp vào một nơi khác
Label
Selected item
Option 1
Option 2
5Khi phần chọn không mở và chúng tôi nhấn vào
Label
Selected item
Option 1
Option 2
41, nó sẽ bỏ chọn mục hiện tại, hãy khắc phục điều này trong
Label
Selected item
Option 1
Option 2
5
Label
Selected item
Option 1
Option 2
6Khi mục được đánh dấu và mục được chọn không giống nhau, chúng ta cần thay đổi màu của biểu tượng kiểm tra thành màu xanh lam; . Hãy khắc phục điều này với một số lớp động
Label
Selected item
Option 1
Option 2
7Vậy là xong, chúng ta đã hoàn thành. 🚀 👏
Như bạn có thể thấy, bằng cách thả nhiều thành phần
Label
Selected item
Option 1
Option 2
04 vào chế độ xem của chúng tôi, mỗi thành phần sẽ thực hiện công việc của mìnhBớt tư tưởng
Đôi khi, chúng tôi không đánh giá cao có bao nhiêu thứ đang diễn ra bên trong khi sử dụng các gói thành phần của bên thứ ba. Khi chúng tôi tự làm, ngoài việc tìm hiểu những gì liên quan, chúng tôi cũng nhận ra rằng đó là điều chúng tôi có thể tự làm. Vì vậy, khi chúng tôi cần một cái gì đó tùy chỉnh, chúng tôi sẽ không sợ nó
Một điểm đáng chú ý khác là. Nếu bạn muốn các thành phần Livewire có thể tái sử dụng, bạn nên chuyển mọi phụ thuộc từ bên ngoài vào chúng và không sử dụng các sự kiện và trình nghe toàn cầu
Chúng ta có thể sử dụng Livewire cho nhiều thứ, nhưng chúng ta nên đề phòng những tình huống mà việc sử dụng Javascript có ý nghĩa hơn. núi cao. js và Livewire phối hợp với nhau rất tốt và khi kết hợp chúng, chúng tôi có thể giải quyết rất nhiều vấn đề cho khách hàng và người dùng của mình
Khởi chạy LaravelBay. io là một nơi tuyệt vời để triển khai ứng dụng Laravel của bạn. Thật dễ dàng để bắt đầu. Bạn có thể chạy trong vài phút
Ra mắt ứng dụng Laravel của bạn ngay hôm nay. →
Thành phần cuối cùng
Đây là phiên bản cuối cùng của thành phần của chúng tôi với Alpine. bao gồm các cải tiến js
Label
Selected item
Option 1
Option 2
8hack vui vẻ
Cập nhật lần cuối • Ngày 1 tháng 8 năm 2022 Chia sẻ bài đăng này trên Twitter Chia sẻ bài đăng này trên Hacker News Chia sẻ bài đăng này trên RedditTác giả
TênApród IllésBài tiếp theo ↑Triển khai với các Gói Trình soạn thảo Riêng tưBài trước ↓Laravel Full StackBài tiếp theo ↑Triển khai với Private Composer PackagesBài trước ↓Full Stack LaravelTối ưu hóa hiệu suất FlyApp
Công tyGiới thiệu về giá Việc làmCác bài báoBlog Phoenix Tệp Laravel Byte Ruby DispatchTài nguyênTrạng thái hỗ trợ tài liệuLiên hệGitHubCộng đồng TwitterPháp lýBảo mậtChính sách bảo mậtĐiều khoản dịch vụ