Tạo các thành phần UI library thành các thành phần Vue chung có khả năng mở rộng

Sử dụng các thư viện UI như Bootstrap, Vuetify...

giúp bạn dễ dàng sử dụng các thành phần UI chất lượng cao.

Tuy nhiên, đôi khi bạn sẽ băn khoăn không biết nên tùy chỉnh như thế nào.

Thông thường, để truy cập vào các phần tử bên trong thành phần, bạn sẽ sử dụng

:deep(.class-name), nhưng vấn đề là khi bạn cần tùy chỉnh cùng một thành phần khác nhau trên cùng một màn hình,

hoặc cần áp dụng cùng một kiểu dáng trên màn hình khác.

Ví dụ,

nếu bạn muốn thay đổi màu nền của thành phần tooltip của Buefy, bạn có thể sử dụng như sau:

Nhưng nếu bạn muốn thay đổi một thành phần thành màu đen, và một thành phần khác thành màu cam thì sao?

Bạn sẽ liên tục áp dụng các lớp mới (ghi đè CSS).

Nếu bạn muốn sử dụng tooltip màu đen trên màn hình khác thì sao?

Sao chép và dán kiểu dáng (hoặc sử dụng module).

Để giải quyết vấn đề này, tôi đã xây dựng một thành phần mở rộng hơn như sau:

Cấu trúc như trên.

Giờ đây, bạn có thể sử dụng custom-tooltip.vue trong thành phần cha.

Ngoài cách này ra còn nhiều cách giải quyết khác.

- Tạo chỉ thị tùy chỉnh để mở rộng.

- Sử dụng $variables để mở rộng chủ đề.

Mặc dù tôi đã bỏ qua nhiều phần, nhưng nếu có nhiều logic hoặc API được bao gồm ngoài kiểu dáng,

Tôi nghĩ rằng việc gói gọn chúng thành các thành phần như vậy sẽ phù hợp hơn.

• Nếu bạn có ý tưởng hay nào khác, vui lòng cho tôi biết.