主题
- #組件擴展
- #通用組件
使用Bootstrap、Vuetify等UI函式庫可以
輕鬆使用高品質的UI組件。
但是，常常會苦惱於如何自訂。
通常為了存取組件內的元素，
會使用`:deep(.class-name)`之類的方式存取，
問題是，當在一個畫面中需要以不同的方式自訂相同的組件時，
或在另一個畫面中需要套用相同的樣式時。
例如，
如果想更改buefy的tooltip組件的背景顏色，可以使用以下方式。
但是，如果想將某些組件改成黑色，其他組件改成橘色呢？
每次都重新套用類別。(CSS覆寫)
如果在其他畫面也想要使用黑色工具提示呢？
複製貼上樣式。(或使用模組)
為了解決上述問題，我們構建了如下所示的更具擴展性的組件。
按照上述方式構建。
現在，在父組件中使用custom-tooltip.vue。
除了上述方法外，還有許多其他的解決方案。
- 建立自訂指令來擴展的方法
- 使用$variables來擴展主題的方法
雖然省略了很多部分，但如果包含樣式以外的許多邏輯或API，
這樣用組件封裝起來可能更合適。
- 如果您還有其他好的想法，請告訴我，謝謝。
评论0