在 Quasar 使用全域 Filter 過濾器
最近嘗試在 Quasar 上使用 Filter 過濾數字格式,途中要全域啟用 Filter 的時候有遇到一些問題,查資料並解決之後,覺得這是使用 Quasar 時的一個滿重要的觀念,因此決定來記錄一下。
這篇文章會介紹如何在 Quasar 下該如何加入全域的 Filter 過濾器,讓我們在各元件之中都能直接使用過濾器。
在 Quasar 使用全域 Filter
Step 1: 新增 Filter 過濾器
- 新增 Filter 過濾器
- 將檔案放在
src/boot/
資料夾底下,例如:src/boot/filters/example.js
過濾器的範例程式碼:
1 | // src/boot/filters/example.js |
由於 Filter 過濾器的功能不是本文的重點,所以程式碼的部分我就簡單帶過哩
Step 2: 全域啟用
- 在
quasar.conf.js
中啟用 Boot files
現在我們就來啟用製作完成的過濾器吧!
如果是使用 Vue CLI,我們都是在進入點,也就是 /main.js
裡面啟用 Filter 過濾器,不過 Quasar 並沒有 main.js
檔案,那麼我們到底該怎麼啟用 Filter 呢?
在 Quasar 專案的根目錄下有個 quasar.conf.js
設定檔,我們可以用它來啟用 Boot files,而所謂的 Boot files 指的就是放在 src/boot/
這個資料夾下的檔案。此外,不只是 Filter,其他像是 Mixin、Axios、i18n 等重要的功能,其實都是要透過啟用 Boot files 的方式來使用的。
藉由這個方式,我們就能宣告一個全域的 Filter 過濾器哩!
1 | // quasar.conf.js |
Hint: 其實也可以使用 Mixin 定義 Filter 過濾器的功能,然後全域啟用 Mixin 或者個別在某些元件中使用
參考資料
- How do i add global filters to Quasar? | Quasar Framework Community
- Configuring quasar.conf.js | Quasar Framework
- Boot files | Quasar Framework
以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。