在 Quasar 使用全域 Filter 過濾器

發表於 分類於

最近嘗試在 Quasar 上使用 Filter 過濾數字格式，途中要全域啟用 Filter 的時候有遇到一些問題，查資料並解決之後，覺得這是使用 Quasar 時的一個滿重要的觀念，因此決定來記錄一下。
這篇文章會介紹如何在 Quasar 下該如何加入全域的 Filter 過濾器，讓我們在各元件之中都能直接使用過濾器。

在 Quasar 使用全域 Filter

Step 1: 新增 Filter 過濾器

  • 新增 Filter 過濾器
  • 將檔案放在 src/boot/ 資料夾底下，例如：src/boot/filters/example.js

過濾器的範例程式碼：

1
2
3
4
5
6
// src/boot/filters/example.js
export default ({ Vue }) => {
  Vue.filter('YourFilter', (value) => {
    return ...
  });
};

由於 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
2
3
4
5
6
7
// quasar.conf.js
module.exports = function(ctx) {
  return {
    boot: ['i18n', 'axios', 'filters/example'],
    ...
  }
}

Hint: 其實也可以使用 Mixin 定義 Filter 過濾器的功能，然後全域啟用 Mixin 或者個別在某些元件中使用

參考資料

  1. How do i add global filters to Quasar? | Quasar Framework Community
  2. Configuring quasar.conf.js | Quasar Framework
  3. Boot files | Quasar Framework

以上資源是我自己整理過後的筆記，若有錯誤歡迎隨時和我聯繫。